2017-03-08 96 views
0

我真的是新角色,我一直在爲這個問題一直在努力。我試圖使用ng-repeat將複選框動態添加到我的html頁面並綁定它們的ng-data-model。 這裏是我的代碼:動態使用ng-repeat綁定到複選框數據模型

<!DOCTYPE html> 
<html > 
<head> 
    <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script> 
<script> 
(function(angular) { 
var helloApp = angular.module("helloApp", []); 
    helloApp.controller("HelloCtrl", ['$scope',function($scope) { 

      $scope.legsDurations = {}; 
      var amountOfLegs = 3; 
      for(var k = 1; k <= amountOfLegs; k++) { 
       $scope.legsDurations[k] = { 
        disabled: true 
       }; 
} 

}]); 
})(window.angular); 

</script> 

</head> 
<body ng-app="helloApp"> 
    <div ng-controller="HelloCtrl"> 
    <div ng-repeat="value in legsDurations"> 
<input ng-data-model="value.disabled" type="checkbox" > 
{{value.disabled}} 
</div> 
      </div> 


</body> 
</html> 

回答

0

ng-data-model是錯誤的。使用ng-modeldata-ng-model

... 
<input ng-model="value.disabled" type="checkbox"> 
... 

代碼:

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <script type="text/javascript" 
 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script> 
 
<script> 
 
(function(angular) { 
 
var helloApp = angular.module("helloApp", []); 
 
    helloApp.controller("HelloCtrl", ['$scope',function($scope) { 
 

 
      $scope.legsDurations = {}; 
 
      var amountOfLegs = 3; 
 
      for(var k = 1; k <= amountOfLegs; k++) { 
 
       $scope.legsDurations[k] = { 
 
        disabled: true 
 
       }; 
 
} 
 

 
}]); 
 
})(window.angular); 
 

 
</script> 
 

 
</head> 
 
<body ng-app="helloApp"> 
 
    <div ng-controller="HelloCtrl"> 
 
    <div ng-repeat="value in legsDurations"> 
 
<input ng-model="value.disabled" type="checkbox" > 
 
{{value.disabled}} 
 
</div> 
 
      </div> 
 

 

 
</body> 
 
</html>

+0

太謝謝你了! –