首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从javascript设置值时,ng-model不会更新

是因为ng-model是AngularJS中的指令,用于在表单元素和作用域变量之间建立双向数据绑定。当使用ng-model指令绑定一个表单元素时,该元素的值会与作用域变量进行双向绑定,任何一方的值发生变化时,另一方也会相应更新。

然而,当通过纯粹的JavaScript代码来设置ng-model绑定的作用域变量的值时,AngularJS并不会自动检测到这个变化,因此ng-model不会更新。这是因为AngularJS使用了脏检查机制来监测作用域变量的变化,而纯粹的JavaScript代码修改作用域变量的值并不会触发脏检查。

解决这个问题的方法是使用AngularJS提供的$apply()函数来手动触发脏检查。$apply()函数会通知AngularJS运行脏检查,并更新ng-model绑定的值。可以将设置ng-model的值的代码包裹在$apply()函数中,例如:

代码语言:javascript
复制
$scope.$apply(function() {
  $scope.variable = newValue;
});

另外,也可以使用AngularJS的内置指令或方法来修改ng-model绑定的值,这样AngularJS会自动检测到变化并更新ng-model。例如,可以使用ng-click指令来绑定一个点击事件,然后在事件处理函数中修改ng-model的值。

总结起来,当通过纯粹的JavaScript代码设置ng-model绑定的作用域变量的值时,需要手动触发脏检查,可以使用$apply()函数来实现。另外,也可以使用AngularJS的内置指令或方法来修改ng-model绑定的值,这样AngularJS会自动检测到变化并更新ng-model。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

angularjs学习第一天笔记

您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教...angularjs类库     b.在html页面要标注ng-app属性,该标注表示所在范围内的DOM结构才收angularjs所控制     c.数据绑定模块的默认格式为{{参数名称}},当然这个格式是可以自定义设置的...    d.第DOM标签添加angular属性,都是以ng-开始     e.angular框架中数据模型数据的变更会动态的绑定显示到view中     f.angular框架外的js修改数据模型的变化不会动态的绑定显示到...$scope.clear = function () { $scope.name = ""; } //// 2s后直接给name赋值,但是试图不会实时更新...= oldValue) { console.log("name又发生了改变:改变前的:【" + oldValue + "】、改变后的【" + newValue +

2.2K10

angularjs学习第一天笔记

您好,我是一名后端开发工程师,由于工作需要,现在系统的0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教...angularjs类库     b.在html页面要标注ng-app属性,该标注表示所在范围内的DOM结构才收angularjs所控制     c.数据绑定模块的默认格式为{{参数名称}},当然这个格式是可以自定义设置的...    d.第DOM标签添加angular属性,都是以ng-开始     e.angular框架中数据模型数据的变更会动态的绑定显示到view中     f.angular框架外的js修改数据模型的变化不会动态的绑定显示到...$scope.clear = function () { $scope.name = ""; } //// 2s后直接给name赋值,但是试图不会实时更新...= oldValue) { console.log("name又发生了改变:改变前的:【" + oldValue + "】、改变后的【" + newValue +

2.1K30

angularjs 表单验证

$invalid 最后两个属性在用于DOM元素的显示或隐藏是特别有用的。同时,如果要设置特定的class,他们也非常有用的。...ngModelDOM中读取的会被传入$parsers中的函数,并依次被其中的解析器处理。这是为了对进行处理和修饰。 备注:ngModel....value(字符串):value参数是我们想要赋值给ngModel实例的实际。 这个方法会更新控制器上本地的$viewValue,然后将传递给每一个$parser函数(包括验证器)。...注意,单独调用$setViewValue()不会唤起一个新的digest循环,因此如果想更新指令,需要在设置$viewValue后手动触发digest。...$setViewValue()方法适合于在自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望在回调设置$viewValue并执行digest循环。

6.6K70

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

: 方法二与方法一的区别: 使用模块标签{{ }}加载慢或渲染慢用户将看到标签,而ng-bind不会,但是使用模块要方便。...表达式会被立即计算,不像 JavaScript的onchange事件只会在最后一次改变触发(通常,当用户离开表单元素或按回车键)。当值的变化来自于模型不会对表达式进行计算。...如果表达式结果为一个对象,对象中的每个key-value中如果键值为真则键名作为类名。 这个指令不会添加重复的类,如果这个类已经存在的话。...当表达式改变,以前添加的类会被移除,并且只会添加之后新产生的类。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...arrayObj.pop(); 移除最前一个元素并返回该元素,数组中元素自动前移 arrayObj.shift();  删除指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

15.3K100

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

当加载慢的效果: ? 方法二与方法一的区别: 使用模块标签{{ }}加载慢或渲染慢用户将看到标签,而ng-bind不会,但是使用模块要方便。...表达式会被立即计算,不像 JavaScript的onchange事件只会在最后一次改变触发(通常,当用户离开表单元素或按回车键)。当值的变化来自于模型不会对表达式进行计算。...如果表达式结果为一个对象,对象中的每个key-value中如果键值为真则键名作为类名。 这个指令不会添加重复的类,如果这个类已经存在的话。...当表达式改变,以前添加的类会被移除,并且只会添加之后新产生的类。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...4.4、删除 移除最后一个元素并返回该元素 arrayObj.pop(); 移除最前一个元素并返回该元素,数组中元素自动前移 arrayObj.shift();  删除指定位置deletePos开始的指定数量

12.6K30

Angularjs基础(三)

AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的 ng-model指令     ...ng-model指令可以将输入域的与AngularJS 创建的变量绑定。       ...              $scope.name = "John Doe";           })        双向绑定     双向绑定,在修改输入域的...scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。       实例: 如果你改变了视图,模型和控制器也会相应更新。         ...控制器JavaScript对象,由标准的JavaScript对象的构造函数 创建。

3.1K50

Angularjs基础(二)

AngularJS 表达式很像JavaScript表达式:他们可以包含文字,运算符和变量。     ...ng-model指令把元素(比如输入域的)绑定到应用程序       实例:                        ...ng-model指令       ng-model指令绑定HTML元素到应用程序。       ...使用驼峰命名法来命名一个指令,runoobDirective,但在使用它需要以-分割,runoob-directive       实例:         <body ng-app="myApp...实例:         通过添加 restrict 属性,并<em>设置</em>只<em>值</em>为 "A", 来设置指令只能通过属性的方式来调用:         var app = angular.module("myApp

3.4K60

angularjs学习第七天笔记(系统指令学习)

:基础指令、在指令中使用子作用域   第一、基础指令     基础指令由包括bool型和类bool型两类     bool型指令,就是其是一bool(true or false)     1.1、bool...1、ng-app:DOM元素将被标记为$rootScope的起始点          在JavaScript代码中通过run方法来访问$rootScope。        ...true     $odd:当$index是奇数时值为true     ng-repeat在数据列表显示中用的比较多,在实际使用中可以根据其关键字进行样式设置展示     特别说明:集合数据的开始坐标是...0,所以在处理奇偶数要注意     来一个练习: <!...会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁       ng-bind只能执行单个变量绑定         但是可以借助:ng-bind-template定义一个模板实现多变量绑定

2.9K10

第217天:深入理解Angular双向数据绑定的原理

很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求)。...具体的代码实现通常用到以下几个ng指令: ng-model:将一个DOM节点的与一个angular中的变量进行绑定,当DOM节点发生修改的时候变量也会随之修改。...3.ng-model = “eparator” ng-model指令用于建立数据模型,在模型中对应有一个变量username用来存放input元素的value从而绑定了输入框的到 scope (应用程序...5.双大括号{{变量}} 用双重大括号来获取变量的。当在控制器中添加 $scope对象,视图 (HTML)可以获取了这些属性。...input元素的value发生变化,自动同步到model的 firstName 变量中,{{ firstName }}}是模型中读 firstName 的,因此下面姓名中元素的内容跟着变了。

3.6K20

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

1.1数据html流向controller 也就是视图层流向模型层,原生html中需要使用表单元素(例如input标签)来收集用户输入信息,Angularjs中通过在表单元素上使用ng-model标签...1.2 数据controller流向html 也就是模型层流向数据层,当controller中的数据模型变量发生变化后,Angularjs又会根据数据模型的去改变ng-model指令绑定的表单元素的...如果我们自己来考虑,javascript中有一个变量的发生了变化,现在要将这个同步到html页面上,需要怎么做呢?...那么此处的问题其实就在于,在setInterval的回调函数中去修改数据模型的,没有触发$apply()方法来更新视图,而通过调用Angularjs封装的ng-*方法(例如ng-click点击方法)...2.1 directive中的双向数据绑定 在设定自定义指令的scope参数,将属性的设置为=就可以实现双向数据绑定,这里API的解释是: 父级controller中的指定变量会与自定义指令link

3.4K20

AngularJS ng-model 指令

通过 ng-model 指令,可以将用户在表单元素中输入的自动同步到控制器中的变量,并且当变量的改变,相应地更新表单元素的显示。...ng-model 指令的工作原理当使用 ng-model 指令,AngularJS 会在后台自动创建一个监听器,用于监测表单元素的变化。当用户在表单元素中输入,该监听器会更新绑定的变量的。...复选框(checkbox)ng-model 指令也可以用于处理复选框的。当用户勾选或取消勾选复选框ng-model 指令会更新绑定的变量的。...单选框(radio)类似于复选框,ng-model 指令也可用于处理单选框的。当用户选择不同的单选框ng-model 指令会更新绑定的变量的。...下拉框(select)ng-model 指令还常用于处理下拉框的。当用户选择不同的选项ng-model 指令会更新绑定的变量的

14630

AngularJs之Scope作用域

继承作用域   AngularJS 在创建一个作用域,会检索上下文,如果上下文中已经存在一个作用域,那么这个新创建的作用域就会以 JavaScript 原型继承机制继承其父作用域的属性和方法。   ...虽然在 childCtrl 中没有定义具体的 args 属性,但是因为 childCtrl 的作用域继承自 parentCtrl 的作用域,因此,AngularJS 会找到父作用域中的 args 属性并设置到输入框中...根据 AngularJS 的原型继承机制,如果 ng-model 绑定的是一个对象数据,那么 AngularJS 将不会为 childCtrl 创建一个 args 的对象,自然也不会有 args.content...存在这样设计机制的好处是:能够创建出一些列可复用的 directive,这些 directive 不会相互在拥有的属性上产生串扰,也不会产生任何副作用。...初始父作用域中的$scope.btns.name为小写的“nick”,通过双向绑定,孤立作用域中将父作用域的 name改写成为大写的“NICK”并且直接生效,父作用域的被更改。

1.5K30

angularjs学习第七天笔记(系统指令学习)

:基础指令、在指令中使用子作用域   第一、基础指令     基础指令由包括bool型和类bool型两类     bool型指令,就是其是一bool(true or false)     1.1、bool...1、ng-app:DOM元素将被标记为$rootScope的起始点          在JavaScript代码中通过run方法来访问$rootScope。        ...true     $odd:当$index是奇数时值为true     ng-repeat在数据列表显示中用的比较多,在实际使用中可以根据其关键字进行样式设置展示     特别说明:集合数据的开始坐标是...0,所以在处理奇偶数要注意     来一个练习: <!...会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁       ng-bind只能执行单个变量绑定         但是可以借助:ng-bind-template定义一个模板实现多变量绑定

2.6K30
领券