zoukankan      html  css  js  c++  java
  • 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>
              

      

  • 相关阅读:
    ES 分组排序java实现
    java多线程中的死锁、活锁、饥饿、无锁都是什么鬼?
    Java 虚拟机对锁优化所做的努力
    Docker 核心概念、安装、端口映射及常用操作命令,详细到令人发指。
    20条最最常用的Linux命令讲解
    Linux查看系统配置常用命令
    全面认识Docker和基本指令
    25个深度学习开源数据集
    Docker 简单运用
    一小时学会C# 6
  • 原文地址:https://www.cnblogs.com/ww03/p/7326679.html
Copyright © 2011-2022 走看看