Question

我试图迭代使用angular创建的数组，所以我可以将它们添加起来然后显示它们，但问题是，我收到的错误是该属性＆＃39; 1＆＃39;即使我填写输入字段，未定义，为什么会这样？

我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>jQueryForm</title>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="form" ng-init="dataSet = [{},{},{},{},{}]">
    <div ng-repeat="data in dataSet">
      <input type="checkbox" ng-model="data.checked" />
      <label>Data:</label>
      <input type="number" ng-model="data.number" />
      <br/>
    </div>

    <span>{{result}}</span>

    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
        for (var i = 1; i < 5; i++) {
          $scope.result += $scope.dataSet[i];
        }
      });
    </script>
  </div>
  </div>
  </span>

</body>


</html>

＆＃13;

Answer 1

由于ng-init是一种特殊的指令，用于评估expression指令函数中提供给它的preLink。

PreLink功能： - 此功能在范围之后得到评估为该元素创建

通过阅读以上内容，您会发现它已在$scope.dataset可用之前评估了循环。哪个是显而易见的失败。

我想说不要在这种情况下使用ng-init。将初始化数据放在控制器本身内。

<强>代码

//remove ng-init directive from UI
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   function init(){
     for (var i = 1; i < 5; i++) {
       if($scope.dataSet[i].checked)
          $scope.result += $scope.dataSet[i].number;
     }
   }

   //init
   $scope.dataSet = [{},{},{},{},{}]
   init();
});

Answer 2

这次你必须以不同的方式初始化dataSet。只需将其添加到控制器的范围，而不是使用ng-init。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>jQueryForm</title>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="form">
    <div ng-repeat="data in dataSet">
      <input type="checkbox" ng-model="data.checked" />
      <label>Data:</label>
      <input type="number" ng-model="data.number" />
      <br/>
    </div>

    <span>{{result}}</span>

    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
        $scope.dataSet = [{},{},{},{},{}];

        for (var i = 1; i < 5; i++) {
          $scope.result += $scope.dataSet[i];
        }
      });
    </script>
  </div>
  </div>
  </span>

</body>


</html>

＆＃13;

为了使代码有效，你必须改变一些事情。您尝试添加数字的循环将只调用一次 - 在控制器的实例化时间。那时，还没有输入任何数字。你可以用一个按钮来解决它。（还要加上数字，而不是dataSet中的对象）

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>jQueryForm</title>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="form">
    <div ng-repeat="data in dataSet">
      <input type="checkbox" ng-model="data.checked" />
      <label>Data:</label>
      <input type="number" ng-model="data.number" />
      <br/>
    </div>

    <button ng-click="calculate()">calculate</button>
    <span>{{result}}</span>

    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
        $scope.dataSet = [{},{},{},{},{}];

        $scope.calculate = function() {
          $scope.result = 0;

          for (var i = 0; i < $scope.dataSet.length; i++) {
            if(angular.isNumber($scope.dataSet[i].number) && $scope.dataSet[i].checked)
              $scope.result += $scope.dataSet[i].number;
          }
        };

        //Edit. Doesn't have the best performance, keep dataSet small
        $scope.$watch('dataSet', function(newValue, oldValue) {
          $scope.calculate();
        }, true);

      });
    </script>
  </div>
  </div>
  </span>

</body>


</html>

＆＃13;

我在这里和那里修了几件东西。我假设，你只想添加那些被检查过的数字 - 而且，没有值的ng模型会导致问题，这就是为什么要引入数字检查的原因。

修改如果你想在没有按钮的情况下这样做：你可以使用深度$ scope。$ watch。 https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$表

Answer 3

感谢@Pankaj Parkar和@JanS，我终于做了我想要的，每次输入改变时我都会调用函数"1/3/4"，每次点击一个复选框我都会调用它。

<强>代码：

＆＃13;

calculate();

＆＃13;

无法在范围内迭代输入

3 个答案: