модель привязки к мульти-checkbox

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>