다중 모델로 바인딩 모델

Question

"프로젝트"에 대한 모델 데이터를 보유하고있는 편집 양식이 있습니다. 프로젝트에는 할당 된 사용자 배열이 있으며 컨트롤러에는 할당 할 수있는 전체 사용자 목록의 다른 배열이 있습니다. 양식에는 현재 모든 availble 사용자가 나열되어 있으며 프로젝트에 이미 지정된 항목을 선택하고 사용자가 체크/체크되지 않은 항목 목록을 수정하는 경우 관련 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>