The changes made to $scope in AngularJS are not being displayed in the view

The View Section

 <div class="col-sm-8" data-ng-init="init_enable_disable()">
     <select class="form-control" style="margin-top: 5px;" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType);">
         <option ng-selected="{{type == defaultSelectedType}}" data-ng-repeat="type in schduleType">{{type}}
         </option>
     </select>
</div>

ng-repeat model

 $scope.schduleType = ['Recurring', 'One time'];

I am modifying the ng-model later on, but it's not reflecting in the view

 if (editRecord.freq_type === 1) 
 {
     alert("one time");
     $scope.schedule.scheduleType = 'One time';
 }

Please advise on what might be going wrong.

javascriptangularjs

Answer №1

If you are using ng-model to assign values from the controller, there is no need for ng-selected in the DOM. It is also recommended to initialize values from the controller.

Give it a try!

In your controller:

$scope.scheduleType = ['Recurring', 'One time'];
$scope.schedule = {};
$scope.schedule.scheduleType = $scope.scheduleType[0]; // initial selection

$scope.enable_disableDiv = function(){
    console.log($scope.schedule.scheduleType);
}

In HTML:

<select class="form-control" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType)">
    <option ng-repeat="type in scheduleType" value="{{type}}">{{type}}</option>
</select>

Note: If you need to change option values from the controller, make sure to reference $scope.scheduleType instead of just using a value directly. For example, if you need to change based on a condition:

if(editRecord.freq_type === 1) {
   $scope.schedule.scheduleType = $scope.scheduleType[1];// not "One Time"
}

Answer №2

Here is a suggestion for you to consider:

`$scope.$applyAsync(function(){
   $scope.schedule.scheduleType = 'Recurring';
})`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

javascript identify dissimilarities within arrays

Working on an Angular 2 application and attempting to identify the difference between two arrays (last seven days and missing dates within the last seven days). Everything works fine when initializing the array through a string, like in example code 1. How ...

javascriptangulartypescript

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

In my code, there is an ng-repeat that generates a table based on one loop, and within each row, another cell is populated based on a different loop: <tbody> <tr ng-repeat="r in roles | limitTo: 30"> <td>{{r.name}}</td> ...

javascriptangularjsangularjs-ng-repeatangular-ng-if

Autocomplete failing to provide a valid response, returning a null value instead

Utilizing an Autocomplete feature for employee search, users can input a name and select from the list of results. However, the current onChange function logs the index value instead of the selected employee's name. Is there a way to pass the employee ...

javascriptreactjsmaterial-uiauto

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

cssangularjsjsoncordovaionic-framework

Looking to parse and iterate over JSON data retrieved from a query using Express and Jade?

As a newcomer to nodejs, I am facing an issue with passing JSON data from a select query to the Jade view. Using Node.js Tools for Visual Studio and Express + Jade in my project, here is a snippet from my index.js file: exports.products = function (req, r ...

javascriptjsonnode.jsexpress

Tips for resolving the "Page Not Found" error in your NextJs application

I am organizing my files in the following structure src/ ├── app/ │ ├── pages/ │ │ ├── authentication/ │ │ │ ├── SignUp/ │ │ │ │ └── page.tsx │ │ │ └── SignIn/ │ ...

javascriptreactjstypescriptnext.jsfrontend

Guide to ensuring modal box only appears once all criteria are satisfied

On my website, I have a form that requests the user's personal information. After filling out the form, a modal pops up with a "Thank you for signing up" message. The issue is that even if all fields are left blank and the button is clicked, the modal ...

javascriptformsmodal-dialogradio-buttonrequirements

Error: Property 'blogCategory' is unreadable because it is undefined

Having trouble rendering blog posts from a json file in React const BlogPost = (props) => { const [post, setPost] = useState({ id: "", blogCategory:"", blogTitle:"", postedOn:"", ...

javascriptreactjsstate

Utilizing Angular's web architecture involves nesting components and concealing them with the ng-hide directive

I'm currently working on an Angular 1.X application and have encountered a scenario where a component is shared across three different pages. Within the main component, there are several nested components but only two of them should be displayed on a ...

javascriptangularjs

Menu with hover functionality in JQuery that functions as a standard menu even when JavaScript is disabled in the browser

Is it possible to modify this code so that the hover point links' images do not appear if the browser has JavaScript disabled? And can the links function like a regular hover point even when JavaScript is disabled? <script type="text/javascript" s ...

javascriptjquery

Tips for storing a JSON file with GridFS

In my possession is an extensive dataset. Utilizing mongoose schemas, each data element has a structure resembling the following: { field1: “>HWI-ST700660_96:2:1101:1455:2154#5@0/1”: field2: “GAA…..GAATG” } Reference: Re ...

javascriptjsonmongodbmongoose

Applying a class to an element in VueJS is not functioning as expected

My goal is to assign the class .testcolor to the div element when testvalue is true, and apply no class when it's false. I encountered an issue where the getClass method does not get called when added to :class attribute, but works fine when called f ...

javascriptvue.jsvuejs3javascript-framework

What specific data am I sending from my ajax request to the MVC controller?

How can I determine the appropriate parameter to use when passing a JavaScript object? Please see below: var all = []; //iterate through each instrument for (var i = 0; i < 3; i++) { var txt = getThis(i);//int var detail =getThat(i);//string ...

javascriptajaxasp.net-mvc

Receive the most recent query in a Nuxt plugin following the completion of page loading

So, here's the issue - I have a plugin containing some functions that are supposed to update URL queries. However, every time I run $global.changePage(2) or $global.changeLimit(2), the console.log(query) outputs an empty object and doesn't show t ...

javascripttypescriptnuxt.js

Vue js homepage footer design

I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work. Here is where I need to add the footer Below is my footer component: <template> <footer> </ ...

javascriptvue.jsfooter

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

Currently, my goal is to successfully install angular-ui. Following the tutorials, I have attempted all commands such as: npm install angular-bootstrap However, this command results in an error message: +-- UNMET PEER DEPENDENCY angular@>=1.5 After ...

javascripthtmlcssangularjsbower

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

When a link is clicked, I am attempting to load an HTML template. A directive has been created with the templateUrl attribute to load the HTML file. Upon clicking the link, a function is called to append a custom directive "myCustomer" to a pre-existing di ...

javascriptjqueryhtmlangularjsangularjs-directive

Is the behavior of String.replace with / and different in Node.js compared to Chrome?

Creating a router in Node.js involves mapping URIs to actions, which requires an easily configurable list of URIs and regular expressions to match against the request URI. This process may seem familiar if you have experience with PHP. To test this functi ...

javascriptregexnode.jsescapingread-eval-print-loop

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

javascriptjqueryhtml

I aim to prevent users from liking a post multiple times within Firebase

I came up with this code snippet to implement the Like functionality: /*Incrementing by 1 every time a user submits a like*/ db.collection("post").doc(postId).update({ likes: increment }) /*Collecting the UID of the user who submitted the l ...

javascriptreactjsfirebasegoogle-cloud-firestore