ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误

一、ng-include 引入的文件中，ng-model 数据不更新

　　例如， $scope.username = “Jones” 。此时，在 ng-include 引入的文件中，直接使用 ng-model="username" 会出现这种情况。

　　原因：ng-include指令创建了一个新的数据范围，它是原始范围的实例

　　解决方法：

　　　　1、可以直接在包含的Html模板中这样写 ng-model =“$parent.username”

　　　　2、或者将其改为 object 对象并绑定到对象的属性，例如：

　　　　　　$scope.data = { username : “Jones” };

　　　　　在Html模板中这样写 ng-model =“data .username”

二、使用 ng-repeat 报错 Error: [ngRepeat:dupes]

　　例如，下面的代码就会报错：

<html><head><script src="angular-1.2.2/angular.js"></script><script>function myController($scope,$rootScope,$injector){$scope.dataList = [1,2,1];}</script></head><body ng-app ng-controller="myController"><div ng-repeat="data in dataList">{{data}}</div></body>
</html>

　　原因：ng-Repeat不允许collection中存在两个相同Id的对象。对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。　　　　

　　解决方法：

1、为了规避这个错误，可以定义自己的track by表达式。例如直接拿循环的索引变量$index来用

ng-repeat="data in dataList track by $index"

2、或者写成对象数据类型，那么就算内容一摸一样，ng-repeat也不会认为这是相同的对象。例如上面可以改成

$scope.dataList = [{"num":1},{"num":2},{"num":1}];

三、selsect 中 ng-model 的值和选中的值不同步

　　例如下面的图片中，修改数据时，加载原本的数据， $scope.dispaly= "line" ，在 select 中 ng-model=“dispaly”。可以看到直接输出数据是“line”, 理论上下拉菜单显示的应该是 “折线图”。

　　原因：上述下拉菜单默认显示了第一个，提交的时候，也是提交了正确的数据。所以，这是本人书写时遗漏了~~

　　解决方法：在 option中使用 ng-selected，如下：

<select class="form-control" ng-model="display" required ng-disabled="isDisabled"><option value="{{key}}" ng-repeat="(key,value) in lists" ng-selected="display === key">{{value}}</option>
</select>

转载于:https://www.cnblogs.com/ww03/p/7326679.html

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误相关推荐

SQL Server 表中有重复的数据，无法对重复数据进行更新或删除。
SQL Server 表中有重复的数据,无法对重复数据进行更新或删除. 弹出错误信息提示窗口提示"已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行(2行). 通常这种情况是因为表 ...
AJAX——与服务器交换数据并更新部分网页技术
简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) ...
数据状态更新时的差异 diff 及 patch 机制
数据状态更新时的差异 diff 及 patch 机制数据更新视图之前讲到,在对 model 进行操作对时候,会触发对应 Dep 中的 Watcher 对象.Watcher 对象会调用对应的 upd ...
东软软件动态生成对数据表更新操作的方法
1 public string CreatUpdate() 2 { 3 4 StringPlus strclass = new StringPlus(); 5 StringPlus strclass1 ...
python热更新原理_Python功能点实现：数据热更新
关键词:热更新 | 热重载 | 定时更新 | 即时更新 | 缓存 | functools | cachetools | LRU | TTL 假设应用需要加载一个配置文件config.txt,一般的做法 ...
python可以实现的功能_Python功能点实现：数据热更新
关键词:热更新 | 热重载 | 定时更新 | 即时更新 | 缓存 | functools | cachetools | LRU | TTL 假设应用需要加载一个配置文件config.txt,一般的做法 ...
Python使用SQLAlchemy连接数据库并创建数据表、插入数据、删除数据、更新表、查询表（CRUD）
Python使用SQLAlchemy连接数据库并创建数据表.插入数据.删除数据.更新表.查询表(CRUD) 目录 Python使用SQLAlchemy连接数据库并创建数据表 #SQLAlchemy # ...
ExtJS Model数据实体模型
1.ExtJS数据模型基础 ExtJS数据包中重要的三类:Model(数据实体模型).Store(数据集)和Proxy(数据代理) ExtJS的数据模型主要包括: 数据实体模型:Model 数据实体模 ...
Android零基础入门第44节：ListView数据动态更新
2019独角兽企业重金招聘Python工程师标准>>> 经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据 ...
使用php+swoole对client数据实时更新
2019独角兽企业重金招聘Python工程师标准>>> 上一篇提到了swoole的基本使用,现在通过几行基本的语句来实现比较复杂的逻辑操作: 先说一下业务场景.我们目前的大多数应用都 ...

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误相关推荐

最新文章

热门文章

ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误

ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误相关推荐

最新文章

热门文章

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误

ng-model 数据不更新及 ng-repeat【ngRepeat:dupes】错误相关推荐