Angular中修改input的值后如何更新页面ng-model的值

最新推荐文章于 2021-11-21 17:20:07 发布
最新推荐文章于 2021-11-21 17:20:07 发布
阅读量6.4k 收藏
点赞数 1
文章标签： input $apply model 视图 更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39950595/article/details/84839834
版权

在对输入框做输入限制的时候，会在js中改变input值，对值进行改变放入input框中，此时需要更新input ng-model的值。
不能使用$scope.apply()
$scope.apply()是AngularJS 通知angular(视图)进行数据更新
解决方法：
通过手动触发input和change事件来使model发生改变

 $(this).trigger('input'); 
  $(this).trigger('change');
dchhey
关注
Angular实现日期，数据和更新
Phoenix_99的专栏
09-03 679
angular 日历
Angular中Jquery修改input的值之后如何更新Model
meloseven的专栏
04-14 5612
在开发angular程序中，有时候会用到jquery来修改input值，比如在做输入限制的时候，当复制粘贴字符到input框之后，需要对值进行改变再放入到input中。此时需要同步更新input上的ng-model。注意不要使用scope.$apply()，因为这个是model改变之后来更新view的。下面来看下具体方法。function handlePaste(e) { e.prevent
Angularjs input 使用onkeyup无法更新ng-model值的问题
你好邱林和的专栏
09-29 2674
页面上有一个输入框,只能输入数字,所以使用onkeyup,写上正则表达式的规则,来过滤除了数字之外的字符,这种需求倒是实现了,不过在提交的时候,忽然发现,当输入"2017-10"的形式时,正则表达式是起作用了,将-给去除掉了,但输出的model值,仍为2017-这样的形式,传入后台报错,百度了一下看到这篇博文:https://segmentfault.com/q/1010000000717167,
angularjs 在指令中通过dom修改input 的Value值同时更新model
wall 技术日志
11-03 8514
//angularjs 在指令中通过dom修改input 的Value值同时更新model obj.directive('test', ['$parse', function ($parse) { var dateFilter = $filter('date'); return { require: 'ngModel', link: function (scope, ele
通过angularjs修改ng-repeat出来的input的值
qq_39047764的博客
03-05 1836
1：思路上不是从页面获取到这个值，而是直接操作js里面的原数组、2：从数据表通过php传过来的数组是可以在整个作用域进行操作的，不是非要在success里面不可3：也会存在问题，就是所有的ng-repeat出来的按钮都绑定了这个数据，操作一个，就操作了所有，这时候就要引入下标或者id...
angular4更改表单中显示的值_angular4 form 表单中 input输入框的disabled属性
weixin_39559333的博客
12-19 927
直接加[disabled]="isDisabled"属性的话，出现报错根据提示，做如下修改private isEdit: boolean = true;private isDisabled = true;private myForm: FormGroup;private roleParams = {roleName:'',items:['全部权限']}ngOnInit() {this.router...
Angular中ng-bind和ng-model的区别实例详解
11-29
当你在输入框中输入内容时，`ng-model` 会实时同步 `$scope` 中对应的属性值。例如，`<input ng-model="object.xxx">` 将使得输入框的值与 `object.xxx` 保持一致。这种机制使得我们在用户界面的交互过程中，可以...
解决angular双向绑定无效果,ng-model不能正常显示的问题
10-17
例如，`<input type="text" ng-model="paramValue">`将`input`元素的值与`$scope.paramValue`关联。 在问题描述中，出现了以下两种情况： 1. 不起作用的代码示例： ```html <input type="text" ng-model=...
angular ng-model 无法获取值的处理方法
12-12
该问题是由angular使用jq日期插件导致的无法双向绑定 <input id="dateDayStart" ng-model="dateDayStart" />...以上这篇angular ng-model 无法获取值的处理方法就是小编分享给大家的全部内容了
angularjs模型数据改变页面未刷新的解决办法
weixin_38586700的博客
11-15 1366
angularjs模型数据改变页面未刷新的解决办法 在angularjs开发过程中我们发现有时模型数据改变了页面却没有变化，这是因为使用原生Js或者jQuery对模型数据做出更改时，angularjs不能监测到数据的改变，解决办法是 使用angularjs的方法，例如把$.get()改成$http.get()。 使用$scope.apply()手动刷新。 点击带有ng-click指令的按钮时，...
angular监听输入框值的变化_如何在Angular2中检测@Input（）值的变化
weixin_29238147的博客
12-28 2081
实际上，当angular2 +中的子组件input发生变化时，有两种方法可以检测和处理：您可以使用ngOnChanges()生命周期方法 ，也可以在以前的答案中提到：@Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue);...
angular踩坑——数据发生改变，视图未更新
weixin_36430673的博客
11-21 5442
大多数情况下，页面的视图会随着数据的改变而改变，少数情况下，数据变了，而视图不更新。 左侧的视图，右侧数据，数据改变时，视图未更新。。。。具体原因呢，可能是angular 脏检查没有检测到数据更新吧。。。 解决方案： 引入 ChangeDetectorRef,使视图强刷。 1、import { Component, OnInit, Input, ChangeDetectorRef} from '@angular/core'; 2、 3、 ...
2020-09-28
weixin_51051302的博客
09-28 137
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复） 示例：$("#test") 选取 id 为 test 的元素 2、类选择器 .class 描述：根据给定的类名匹配元素，返回元素集合 示例：$(".test") 选取所有class为test的元素 3、元素选择器 element 描述：根据给定的元素名匹配元素，返回元素集合
记录一次angular遍历带有input的列表时，ngModel失效问题
weixin_43989369的博客
12-25 488
主要功能是带有input的列表，可以添加和删除： 添加时new一个实例push进数组： const ruleDetail = new RuleDetailsParams(); this.params.rule_detail.push(ruleDetail); 删除就splice目标index。 但是每次删除再添加，上一个 input 填好的值就会消失。 分析后发现，原来input的 name我...
实现angular页面的更新
路漫漫的博客
08-28 672
$scope(上下文模型) 视图和控制器之间的桥梁 用于在视图和控制器之间传递数据 利用$scope暴露数据模型（数据，行为） $watch(监听函数) $watch(watchModel,watchFunc,watchDeep) // watchModel--被监听的数据 // watchFunc(newValue,oldValue,scope) 数据发生变化时的回调函数 // watchD...
angular学习笔记(四)- input元素的ng-model属性
05-07 547
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> <title>2.3.1input数据绑定</title> <meta charset="utf-8"> <script s...
Jquery input valeu 改变 AngularJS ng-model 值同步 值改变
mingjie1212的博客
06-26 3948
使用jquery 对input 的value 进行改变，同步到ng-model上。 $("#id").val(value).trigger('change'); 此动作就可以实现。
关于angularjs中,数据模型被改变,页面不刷新的解决办法
热门推荐
银狐的专栏
12-16 5万+
刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要$scope.$apply()强制更新数据模型. 实际上出现这种情况,就是因为在angularjs中使用了JS方法产生数据源,看下面代码: var myApp = angular.module("myApp",[]); myApp.controll
angular 页面跳转 带参数传递 页面刷新
u011137664的博客
10-18 2291
  参考 https://www.cnblogs.com/Razor0/p/5200435.html
西门子opcenter如何使用angular的ng-model指令
最新发布
05-26
在使用Angular的ng-model指令之前，需要先确保你的应用程序已经导入了Angular模块。然后可以通过以下步骤使用ng-model指令： 1. 在组件的HTML模板中定义一个表单元素，例如一个输入框或下拉列表。 2. 在表单元素上添加ng-model指令，并将其绑定到组件中的一个属性。例如，如果你想将输入框中的值绑定到组件中的一个名为"username"的属性，则可以这样写： ``` <input type="text" ng-model="username"> ``` 3. 在组件的控制器中，定义一个与ng-model指令绑定的属性。例如： ``` export class MyComponent { public username: string = ''; } ``` 这将创建一个名为"username"的属性，并将其初始化为空字符串。 现在，当用户在输入框中输入文本时，ng-model指令将自动更新组件中的"username"属性。同样地，如果你在组件中更新了"username"属性的值，ng-model指令将自动更新输入框中的值。 需要注意的是，ng-model指令只能用于表单元素，例如input、select和textarea等。对于非表单元素，应该使用ng-bind指令来实现双向数据绑定。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值