绑定模型到多选框

Question

我有一个编辑表单，它为“项目”保存模型数据。该项目有一组用户分配给它，并且控制器有整个用户列表可供分配的另一个阵列。该表单目前列出所有可用用户，我想要做的是勾选已分配给项目的用户，如果用户修改了此列表的选中/未选中项目，请更新相关的project.users属性。

代码为：http://plnkr.co/edit/e2Rc45mgWDkgdHxz1bz0?p=preview

控制器

angular.module('app', []) 

.controller('ProjectsController', ['$scope', function($scope) { 
    $scope.project = {"projectID":"26","projectName":"project one","projectDescription":"blah", 
    "users":[{"userFullName":"Ian","userID":"2"}, 
    {"userFullName":"Kevin","userID":"33"}, 
    {"userFullName":"Peter","userID":"32"}] 
    }; 

    $scope.collaborators = [ 
     {"userID":"2","userFullName":"Ian"}, 
     {"userID":"33","userFullName":"Kevin"}, 
     {"userID":"32","userFullName":"Peter"}, 
     {"userID":"31","userFullName":"Tom"} 
     ]; 
    $scope.updateProject = function(project){ 
     console.log(project); 
    } 

    }]); 

表格

<form name="editProjectForm" novalidate ng-submit="updateProject(project)" > 
    <label>Name</label><BR> 
    <input type="text" ng-model="project.projectName" class="form-control" required><BR><BR> 
    <label>Description</label><BR> 
    <textarea ng-model="project.projectDescription" class="form-control" required></textarea> 
    <br> 
    <label>Assigned to work on project</label><BR> 
    <label ng-repeat="collaborator in collaborators"> 
     <input type="checkbox" ng-model="???" /> {{collaborator.userFullName}} &nbsp; 
    </label> 
    <BR> <BR> 
    <input type="submit" value="Update project details" class="btn btn-primary"> 

</form> 

http://plnkr.co/edit/e2Rc45mgWDkgdHxz1bz0?p=preview

Answer 1

看一看Checklist-model。它增加了checklist-model和checklist-value指令列表的复选框，我认为这正是你需要的。

在你的榜样使用它可能是这个样子：

<label ng-repeat="collaborator in collaborators"> 
    <input type="checkbox" 
      checklist-model="project.users" 
      checklist-value="collaborator" /> {{collaborator.userFullName}} &nbsp; 
</label> 

它有一个MIT许可，所以它不应该是一个商业项目中使用它的问题。

Answer 2

Plunkr

您可以在控制器内创建一个$scope.checked对象，该对象将扫描您的项目用户与合作者用户并根据此用户形成布尔值。

JS

// Checked model will not interfere with existing collaborators 
// or project models. Simply a glue between controller and view. 
$scope.checked = {}; 
// Add all possible collaborators to the checked model 
angular.forEach($scope.collaborators, function(item) 
{ 
    $scope.checked[ item.userID ] = false; 
}); 
// Auto-check any users already assigned to the project 
angular.forEach($scope.project.users, function(item) 
{ 
    $scope.checked[ item.userID ] = true; 
}); 

HTML

<label ng-repeat="collaborator in collaborators"> 
    <input type="checkbox" ng-model="checked[collaborator.userID]" /> {{collaborator.userFullName}} &nbsp; 
</label>