如何在angularjs中使用带有嵌套ng-repeat的复选框
Posted
技术标签:
【中文标题】如何在angularjs中使用带有嵌套ng-repeat的复选框【英文标题】：How to use checkbox with nested ng-repeat in angularjs 【发布时间】：2015-01-24 17:34:00 【问题描述】：大家好我在使用嵌套复选框时遇到了一些问题。在我的问题中，我坚持如何在单击复选框上使用 IncludeAll。如果复选框值为真，那么它会给我一个值。如果 IncludeAll 复选框为真，则所有复选框将被选中并显示 Array 中的所有值。如果其中一个复选框为 false，则 IncludeAll 复选框为 false..但如果另一个复选框将被选中。
这是我的小提琴链接： http://jsfiddle.net/0x4396pu/1/
这是我的 Html 代码：
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll story</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="browser"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
browser
</label>
</div>
</div>
</div>
<pre>selection | json </pre>
</form>
这是我的控制器文件：
function MyCtrl($scope)
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = ;
angular.forEach($scope.stories, function(story)
$scope.selection[story] =
browsers: ,
;
);
提前致谢。
【问题讨论】：
【参考方案1】：我正在回答我自己的问题。但无论如何，这里是如何在嵌套 ng-repeat 中选择复选框的答案。我认为这对你有帮助，谢谢。
Http Plunkr 链接 http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
这是 Html 代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll story</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="browser"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> browser
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>selection | json</pre>
</form>
</body>
</html>
这是我的控制器
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope)
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = ;
$scope.details = ;
var checked;
$scope.updateAll = function (story)
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser)
$scope.selection[story].browsers[browser] = checked;
);
;
for(var i = 0; i< 3; i++)
$scope.stories.push(i+1);
$scope.checkChange = function (browser)
for(var i =0; i< $scope.stories.length; i++)
if(!$scope.stories[i].selected)
checked = false
return false;
angular.forEach($scope.stories, function(storgy)
$scope.selection[storgy] =
browsers:
;
);
$scope.save = function ()
console.log($scope.selection);
)
【讨论】：
【参考方案2】：-
您的“包括所有”复选框正在尝试在
String 上设置 .selectionAll 属性（story in stories 为您提供 String）。
您不能使用ng-checked 以某种方式与ng-model“一起工作”。如果您希望“包含所有”复选框选择所有从属复选框，反之亦然，您需要观察变化并提供一些逻辑来连接控制器中的两个事物。
例如，如果您希望更改“包含所有”复选框的值以影响其他复选框，则必须执行类似的操作
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
在你的控制器中
$scope.updateAll = function (story)
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser)
$scope.selection[story].browsers[browser] = checked;
);
;
并以类似的方式处理各个复选框的更改。
【讨论】：
嘿#hon2a 你能帮我更多吗..通过在小提琴或 plunkr 中举例说明。 嘿#hon2a 我已经检查过了，它工作正常。感谢您的详细解释。以上是关于如何在angularjs中使用带有嵌套ng-repeat的复选框的主要内容，如果未能解决你的问题，请参考以下文章