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

Get the value of a JSON in template strings

After querying objects from a table, they are stored in objarr. How can I retrieve these values in the UI using JavaScript? from django.core.serializers import serialize json = serialize("json", objarr) logging.debug(type(json)) response_dict.update({ ...

javascriptjquerypythonjson

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

javascriptjquerytypescript

Dynamically update a directive array in Vue.js based on real-time changes

In my Vue project, I have an array defined in the data() method that is populated through a custom directive in its bind hook. Here's the code snippet: import Vue from 'vue' export default { el: '#showingFilters', name: "Filte ...

javascriptarraysvue.jsvuejs2

Showing the output variable from node.js on a canvas

Is it possible to display the output of my node.js program, which consists of a series of points (x,y), on canvas without a browser? I came across this module that could potentially help with displaying the points: (https://www.npmjs.com/package/canvas) ...

javascriptnode.jscanvas

How can I configure my data source in Kendo UI to reference a specific item within the object returned by a JSON callback?

Currently, I am implementing KendoUI autocomplete to filter data as users type into a textbox. However, I am facing an issue with the autocomplete functionality. When I type into the field, the search begins, the service is called, and the JSON result/Cal ...

angularjsjsonkendo-uiautocompletekendo-ui-mvc

Encountering issues with jQuery AJAX POST request

I'm currently facing an issue while attempting to send a post request to parse JSON formatted data into my webpage. Here's an example of the query: $("#click").click(function () { $.ajax({ type: "POST", url: "http://ut-pc-236 ...

javascriptjqueryajax

I'm noticing my table collapsing as I move around the div elements - any idea why this is happening

A challenge I am facing is creating a dynamic table where users can drag and drop colored boxes with animated transitions. While it mostly works well, sometimes the table collapses inexplicably. Here are steps to reproduce the issue: Move 100 - 400 Move 1 ...

javascripthtmljquerycss

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb

What is the significance of incorporating vinyl-source-stream into gulp in my workflow?

Recently, I've been experimenting with gulp and browserify to convert my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task(&apos ...

javascriptnode.jsgulpbrowserify

Convert grouped data in Javascript into a JSON array

After implementing the code snippet provided below, I successfully managed to group objects from my existing dataset using Underscore JS. The grouped data is displayed in distinct groups as depicted by the output: {Group1: Array[10], Group2: Array[13], G ...

javascriptjsonunderscore.js

Passing parent HTML attributes to child components in Angular 2

Is there a way to pass HTML attributes directly from parent to child without creating variables in the parent's .ts class first? In the sample code below, I am trying to pass the "type=number" attribute from the parent to the app-field-label component ...

javascriptangularangular2-formsangular2-directives

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

javascripthtmlcss

AngularJS select box setting selected valueIt can be accomplished by manipulating the

I am facing an issue with a selectbox populated with options from the backend. <tr> <td class="col-lg-4">Superkund</td> <td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item ...

javascriptangularjs

My HTML document is not displaying the JavaScript variable as expected

I have created a JavaScript function with several variables and attempted to test it to display the variables in my HTML document. However, I am facing an issue where the variables do not appear as expected. Specifically, I am trying to insert the variable ...

javascripthtml

Encountering null values in IE8/IE7 JavaScript code

Although I am not a JavaScript expert, I have a simple function that works perfectly in all browsers except for IE8 and 7. function setSelected() { var backgroundPos = $('div.eventJumpToContainer').find('.selected').css('backg ...

javascriptjqueryinternet-explorer-8

Tips for adding new items to a Masonry Image List using React MUI

As I experiment with utilizing the React MUI Masonry Image List alongside the infinite scroll, I've found that they complement each other quite well. However, a challenge arises when appending new images to the Masonry image list. While I can success ...

javascriptreactjsmaterial-uiinfinite-scroll

Exploring the loading of stateful data in ReactJS and implementing optimizations

Exploring the world of ReactJS in conjunction with Django Rest Framework (DRF) def MyModel(model): ... status = ChoiceField(['new', 'in progress', 'completed'...]) In my application, I have dedicated sections for eac ...

javascriptpythondjangoreactjsdjango-rest-framework

Deactivate a chosen anchor button when clicked within a loop of elements

In my laravel project, I have a foreachloop that is rendering multiple buttons. I want to disable or remove only the button that is clicked, so I tried the following code: @foreach() <a onclick="remvebtn()" class="btn">My ...

javascriptjquery

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

javascripthtmljsonnode.js

Blurry text and icons in Bootstrap 3

Does anyone else notice a strange display issue with Bootstrap 3 fonts and glyphicons? It seems like the bitmaps and fonts are appearing blurry on desktops when using Firefox and Chrome, but everything looks fine on mobile devices. I've attached an ex ...

javascripthtmltwitter-bootstrap