複選框在AngularJS中的奇怪行爲ng-repeat

Question

我有一個包含輸入字段和複選框（動態生成表格crud）的表單。見下圖：

在這裏，在我的客戶模態對話框的形式，我實現了小CRUD添加/更新/刪除Providers數據和顯示見下表它的飛行。

以下是我的代碼：

查看：

<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController"> 

    <div class="form-group"> 
     <label for="name">Name</label>    
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span> 
      <input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label for="email">Email</label> 
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span> 
      <input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label for="phone">Phone</label> 
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span> 
      <input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label for="phone">Providers</label> 
     <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span> 
      <input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name"> 
     </div> 
     <br> 
     <button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button> 
     <button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button> 
     <button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button> 
     <br>    
     <table style="width: 50%; margin-top: 10px;" class=""> 
      <tbody> 
       <tr ng-repeat="val in providersData"> 
        <td> 
         <input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/> 
        </td> 
        <td>{{val.provider_name}}</td> 
        <td> 
         <a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a> 
         &nbsp;&nbsp;&nbsp;        
         <a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>       
        </td> 
       </tr> 
      </tbody> 
     </table>    
    </div>   

    <div class="well well-lg text-center bg-gray">   
     <button class="btn btn-success" ng-if="id">Save Client</button>       
     <button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>       
     <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>    
     <button class="btn btn-success" ng-if="!id">Add Client</button>    
    </div> 
</form> 

控制器：

 $scope.showModal = false; 
     $scope.client = {}; 
     $scope.provider = null;    

     $scope.addClient = function() { 
      alert(JSON.stringify($scope.client)); 
      $http.post('/clients', {param: $scope.client}).success(function (response) { 
       if (response) { 
        alert("Client added successfully"); 
        $scope.client = ""; 
        refresh(); 
        $scope.closemodal(); 
       } 
      }); 
     }; 

現在我要插入/更新選擇checkboxes值db連同Name,Email和Phone字段。

在這裏，我要面對以下問題：

1. 每當我點擊任何複選框，其檢查所有複選框。
2. 點擊添加客戶端按鈕alert(JSON.stringify($scope.client))這樣 {"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
3. 在其MongoDB的表現像這樣的顯示結果後：

我搜索了很多嘗試this和ng-model="$parent.client.providersList.id"但仍然不工作。

我是AngularJS的初學者，剛開始研究它。

任何幫助，將不勝感激。

Answer 1

您應該使用ng-true-value & ng-false-value在checkbox（我在考慮缺省值是0）。然後使用providersData ng-repeat的$index創建一個client.providersList的數組。

標記

<input type="checkbox" name="{{'providersData'+$index}}" 
    ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" /> 

Answer 2

您所面臨的，因爲你的NG-模式屬性的值的這個問題。對於每個複選框，ng-model屬性的值必須不同。在這裏，試試這個：

<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" /> 

嘗試這樣：

$scope.client = {}; 
$scope.client.providersList = []; 

// Now watch the model for changes 
$scope.$watch('client', function(){ 
    // When the checkbox is selected it returns true 
    if($scope.client.providersList1 == true){ 
     $scope.client.providersList.push({"id": value}) 
    } 
    // Repeat the if statements for all the checkboxes (or use a for loop) 
}, true);