Question

这里我有一个片段（下方）。它的作用是，当你点击身体时，第一个项目（＆＃34; Hello World＆＃34;）变为绿色，当我点击按钮时，点击＆＃34;点击＆＃34;我通过弹出注释中的元素来删除第一个项目，并且angularJS在观察周期后重新呈现HTML，当它保持第一个元素的相同绿色样式时。我期待角度从ng-repeat树中的模板中重新绘制所有元素。这将返回所有＆＃34; Hello World＆＃34;红色比绿色。我错过了非常基本的东西吗？

＆＃13;

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

＆＃13;

Answer 1

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

并且当你点击Hello world时你已经应用了类red它调用了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（）中编写的查询每次在脚本中调用当前存在的第一个元素上的删除函数时执行。所以单击按钮会拼接它，但也调用change（），因为你已经给出了change（）功能到身体所以输入按钮也是身体的一部分，变化适用于所有体内。

谢谢

Angular JS没有更新或重新绘制类

1 个答案: