使用ng-repeat动态绑定到复选框数据模型

时间:2017-03-08 22:32:31

标签: html angularjs

我真是个新角色,我整天都在努力解决这个问题。我正在尝试使用ng-repeat动态地将复选框添加到我的html页面并绑定它们的ng-data-model。 这是我的代码:

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

1 个答案:

答案 0 :(得分: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>