不能遍历范围内的输入

我想通过使用角度创建的数组迭代，所以我可以将它们添加，然后显示它们，但问题是，我得到一个错误说，该属性即使填写了输入字段，'1'也是未定义的，为什么？不能遍历范围内的输入

我的代码：

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

来源

2016-03-02 Kyle

你必须围绕不同的初始化数据集这一次。只需将其添加到控制器的作用域而不是使用ng-init。

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

为了使代码工作，但是，你必须改变一些东西。您尝试添加数字的循环只会在控制器的实例化时间被调用一次。那时，还没有输入号码。你可以用一个按钮解决它。（还添加了数字，而不是对象的数据集）

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

我固定的一些事情在这里和那里。我想，你只想添加那些被检查过的数字 - 同样，没有价值的ng模型导致了问题，这就是为什么引入数字检查的原因。

编辑： 正如你想做的那样没有按钮：你可以使用一个很深的$ scope。$ watch。 https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$手表

来源

2016-03-02 20:36:33 JanS

感谢您再次帮助我的家伙+1 – Kyle

请参阅我的编辑。不幸的是我比我想要的更早地发布了答案。 – JanS

没关系，你帮忙的事实真棒，我仍然是一个新手，我希望将来我也能帮到您 – Kyle

由于ng-init是特殊的指令，它评估expression在指令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(); 
});

来源

2016-03-02 20:35:03

感谢再次帮助伙计+1，我很不幸收到 “[对象]” – Kyle

@ Mr.Derpinthoughton我的坏..我错过看看它..现在它的编辑..谢谢:) –

不，我应该再次感谢你帮助我;） – Kyle

感谢@Pankaj Parkar和@JanS，我终于做出了什么，我想，每次输入改变我调用该函数calculate();，每次点击复选框上我叫它以及。

代码：

<!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 ng-click="calculate()" type="checkbox" ng-model="data.checked" /> 
 
     <label>Data:</label> 
 
     <input ng-change="calculate()" type="number" ng-model="data.number" /> 
 
     <br/> 
 
    </div> 
 

 
    <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; 
 
      } 
 
     } 
 
     }); 
 
    </script> 
 
    </div> 
 
    </div> 
 
    </span> 
 

 
</body> 
 

 

 
</html>

来源

2016-03-02 21:10:54 Kyle

查看我的最新编辑。你可以在控制器内解决这个问题。 – JanS

不能遍历范围内的输入

回答

相关问题