ng-model 數據不更新及 ng-repeat【ngRepeat:dupes】錯誤

時間 2019-12-13

標籤 model 數據更新 repeat ngRepeat:dupes 錯誤简体版

原文原文鏈接

1、ng-include 引入的文件中，ng-model 數據不更新html

　　例如， $scope.username = 「Jones」。此時，在 ng-include 引入的文件中，直接使用 ng-model="username" 會出現這種狀況。app

　　緣由：ng-include指令建立了一個新的數據範圍，它是原始範圍的實例ui

　　解決方法：spa

　　　　一、能夠直接在包含的Html模板中這樣寫 ng-model =「$parent.username」code

　　　　二、或者將其改成 object 對象並綁定到對象的屬性，例如：orm

　　　　　　$scope.data = { username : 「Jones」 };htm

　　　　　在Html模板中這樣寫 ng-model =「data .username」對象

2、使用 ng-repeat 報錯 Error: [ngRepeat:dupes]blog

　　例如，下面的代碼就會報錯：索引

<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就是它自身的值。　　　　

　　解決方法：

　　一、爲了規避這個錯誤，能夠定義本身的track by表達式。例如直接拿循環的索引變量$index來用

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

　　二、或者寫成對象數據類型，那麼就算內容一摸同樣，ng-repeat也不會認爲這是相同的對象。例如上面能夠改爲

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

3、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>