Angular JS 不更新或重新绘制类答案

【问题标题】：Angular JS not updating or re drawing classAngular JS 不更新或重新绘制类
【发布时间】：2017-04-07 06:49:02
【问题描述】：

这里我有一个 sn-p（下）。它的作用是，当您单击主体时，第一项（“Hello World”）变为绿色，当我单击按钮“clicky”时，我正在删除第一项，通过在注释中弹出一个元素，然后 angularJS 重新在监视周期之后呈现 HTML，当它完成时，它为第一个元素保留相同的绿色样式。我期待 Angular 从 ng-repeat 树中存在的模板从头开始重新绘制所有元素。这将返回所有“Hello World”为红色而不是绿色。我错过了一些非常基本的东西吗？

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

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

是的，这里发生的情况是，每当您点击 clicky 按钮时，它转到$scope.remove = function() { $scope.annotations.splice(0,1); console.log($scope.annotations); }

当你点击 Hello world 时，你已经应用了红色类，它调用了 change() 函数，该函数又将子元素的第一个元素变为绿色，现在是 id="-2" 的元素，您的第一个元素已成功删除，但由于 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>

尝试执行这段代码，你会明白的您在 change() 中编写的查询每次在脚本中对该时刻出现的第一个元素调用 remove 函数时都会执行。因此，单击按钮进行拼接，但也调用 change()，因为您已经给出了 change()对 body 的功能，所以输入按钮也是 body 的一部分，更改适用于 body 内部的所有内容。

谢谢

【讨论】：