角JS不更新或重新繪製

類這裏我有一個片斷（下文）。它的作用是，當你的身體單擊第一個項目（的「Hello World」）是由綠色，當我點擊按鈕‘clicky’我取出的第一個項目，在註釋彈出一個元素，angularJS在觀看循環後重新呈現HTML，當它保持第一個元素的相同綠色樣式時。我希望能夠從ng-repeat樹中的模板中重新繪製所有的元素。這將返回所有「Hello World」爲紅色而不是綠色。我是否缺少一些非常基本的東西？角JS不更新或重新繪製

<html> 
 

 
    <head> 
 
    <title> 
 
     Kaboom 
 
    </title> 
 
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" /> 
 
    <script> 
 
    </script> 
 

 
    <script> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function($scope) { 
 

 
     $scope.annotations = [ 
 
      {id: -1, name:"Hello World"}, 
 
      {id: -2, name:"Hello World"}, 
 
      {id: -3, name:"Hello World"} 
 
     ]; 
 

 
     $scope.remove = function() { 
 
      $scope.annotations.splice(0,1); 
 
      console.log($scope.annotations); 
 
     } 
 
    }); 
 
    </script> 
 

 
    <script> 
 

 
     function change() { 
 

 
      var children = document.getElementById("test").children; 
 
      console.log(children); 
 
      children[0].setAttribute("class", "green"); 
 
     } 
 

 
    </script> 
 
    <style> 
 
     .red { 
 
     color: red; 
 
     } 
 

 
     .green { 
 
     color: green; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body onclick = "change()" ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div id = "test" ng-repeat="t in annotations track by $index"> 
 
     <div class = "red" id = "{{t.id}}" >{{t.name}}</div> 
 
    </div> 
 
    <input type="button" value="clicky" ng-click = "remove()" /> 
 
    </body> 
 
</html>

來源

2016-11-23 Sandeep Nagaraj

是，這裏正在發生的事情是，每當你打clicky按鈕，它去$scope.remove = function() { $scope.annotations.splice(0,1); console.log($scope.annotations); }

，你也已經應用類紅色，當你點擊你好世界它調用的變化（）函數，這反過來又變綠孩子的第一個元素是現在id元素=「 - 2」，你的第一個元素是更迭sfully得到去除，但由於remove（）函數反映兒童的第一要素，因此綠色每次打開它。

始終確保您使用的是執行什麼功能應該是非常具體的。

<html> 
 

 
    <head> 
 
    <title> 
 
     Kaboom 
 
    </title> 
 
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" > 
 
    </script> 
 

 
    <script> 
 

 
     function change12() { 
 

 
      var children = document.getElementById("test").children; 
 
      console.log(children); 
 
      children[0].setAttribute("class", "green"); 
 
     } 
 

 
    </script> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function($scope) { 
 

 
     $scope.annotations = [ 
 
      {id: -1, name:"Hello 1"}, 
 
      {id: -2, name:"Hello 2"}, 
 
      {id: -3, name:"Hello 3"} 
 
     ]; 
 
     $scope.remove = function() { 
 
      $scope.annotations.splice(0,1); 
 
      console.log($scope.annotations); 
 
     } 
 
    }); 
 
    </script> 
 

 
    <style> 
 
     .red { 
 
     color: red; 
 
     } 
 

 
     .green { 
 
     color: green; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div id = "test" ng-repeat="t in annotations track by $index"> 
 
     <div class = "red" id = "{{t.id}}" onclick = "change12()">{{t.name}}</div> 
 
    </div> 
 
    <input type="button" value="clicky" ng-click = "remove()" /> 
 
    </body> 
 
</html>

請嘗試執行這段代碼，你就會明白你在變化中寫道查詢（）每次調用刪除功能的腳本上的第一個元素出現在那一瞬間的時間執行。所以點擊按鈕後才能拼接，但也要求改變（），因爲你給的變化（）函數體，從而輸入按鈕也是身體的一部分，變更適用於所有的體內。

謝謝

來源

2016-11-23 11:14:29

角JS不更新或重新繪製

回答

相關問題