不能遍歷範圍內的輸入

我想通過使用角度創建的數組迭代，所以我可以將它們添加，然後顯示它們，但問題是，我得到一個錯誤說，該屬性即使填寫了輸入字段，'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

不能遍歷範圍內的輸入

回答

相關問題