AngularJS不保留表单中复选框列表中的选定项
AngularJS not keeping selected items from checkbox list in a form
我想保存复选框列表中的选定项目列表,该列表由角度服务生成,如下所示。
不幸的是,我的"job"对象仅保留最后一个选定复选框的状态,而不是列表中所有选定复选框的 id 值。
谁能告诉我我做错了什么?
使用整个示例进行 Plunker:http://plnkr.co/edit/znLy9EqUMZN6kRzNnl07?p=preview
<script type="text/javascript">
var app = angular.module('helloWorldApp', []);
app.service('HelloWorldService', function() {
var model = this;
var people = [{
"id": 0,
"firstName": "John",
"lastName": "Doe",
"expertise": "Programmer",
"checked": false
}, {
"id": 1,
"firstName": "Mary",
"lastName": "Jane",
"expertise": "Manager",
"checked": false
}];
model.getPeople = function() {
return people;
};
});
app.controller('HelloWorldController', ['$scope', 'HelloWorldService',
function($scope, HelloWorldService) {
var helloWorld = this;
// why this does not work?
// helloWorld.people = function() { return HelloWorldService.getPeople(); };
// why this one works?
helloWorld.people = HelloWorldService.getPeople();
$scope.selectedPeople = [];
helloWorld.selectedPeople = [];
$scope.createNewJob = function() {
console.log("Object: " + JSON.stringify($scope.job));
};
$scope.addPerson = function(id) {
// how can I keep a list of selected people in my ng-model object?
//helloWorld.selectedPeople.push(id + " selected");
$scope.selectedPeople.push(id + " selected");
helloWorld.selectedPeople = $scope.selectedPeople;
console.log($scope.selectedPeople);
}
}
]);
<tbody ng-controller="HelloWorldController as helloWorld">
<tr ng-repeat="person in helloWorld.people">
<td>
<input type="checkbox" name="peopleList[]" ng-model="job.selectedPeople" ng-click="addPerson(person.id)" value="{{person.id}}" />
<label>{{person.firstName}} {{person.lastName}}</label>
</td>
<td>
{{person.expertise}}
</td>
</tr>
</tbody>
目前,完全相同的模型 (job.selectedPeople) 被分配给每一行,并且每次单击复选框时,复选框的状态都会添加到 selectedPeople 的末尾。这意味着 selectedPeople 充当所有点击的历史记录,而不是当前状态的记录。
可以使用$index指定重复中的每一行都基于其自己的数组元素建模:
ng-model="selectedPeople[$index]"
然后可以删除它,因为数组将通过数据绑定自动更新:
$scope.selectedPeople.push(id + " selected");
helloWorld.selectedPeople = $scope.selectedPeople;
更一般地说,我认为这将有助于更清楚地区分工作和人员,但希望上述内容会有所帮助。
这是一个
正在运行的代码,你的主要错误是为每个输入使用一个ng-model,它是你可以放在表单元素上的控制器范围。
我使用ng-checked
指令来定义是否必须选中复选框。
$scope.isChecked = function (id) {
return $scope.selectedPeople.indexOf(id) > -1;
}
和网页
<input type="checkbox" name="peopleList[]" ng-checked="isChecked(person.id)" ng-click="addPerson(person.id)" />
这是代码,希望对您有所帮助。
http://plnkr.co/edit/jE5fmAGd73c1nGaF5g0C?p=preview
相关文章:
- 如何保持引导程序下拉复选框列表下拉
- (取消)使用单独的复选框激活复选框列表
- 基于所选下拉列表值创建动态复选框
- 从下拉列表中获取选定的复选框
- 选中复选框时如何显示/隐藏下拉列表
- 复选框列表在Knockout JS中不起作用
- 在本地存储中选中复选框,但在加载时也要筛选列表
- 如何创建至少 1 个框处于活动状态的复选框列表
- 如何将从谷歌自定义搜索API获取的数据放入复选框列表
- 检查多个复选框列表与单击一个按钮
- 选中基于下拉列表的复选框
- 使用 JQuery 复选框筛选项目列表
- Angular 2:用HTTP响应填充复选框列表
- 使用复选框列表中的jquery附加文本
- 如何将复选框转换为下拉列表
- 根据MVC列表框和复选框的值更改标记元素
- 如何部分隐藏asp.net复选框列表项
- 待办事项列表复选框编号逻辑
- 在jquery中未激发列表复选框更改事件
- Javascript /jquery-如何确定列表/复选框是否允许选择多个值