如何讓angularjs中的多個單選按鈕組合起來

Question

我是angularjs的新手。我想更新一組用戶的角色我已添加我的代碼和架構，在此代碼下面，我無法獲得對象我喜歡的請查看下面的代碼。

HTML：

<section class="surround" style="overflow-y:scroll;min-height: 600px;"> 
<form name="userrole" ng-submit="addRoles();" novalidate> 
<div class="row"> 
    <div class="col-xs-4"> 
     <div class="row form-group"> 
      <div class="col-xs-offset-5"> 
       <h4>Create User</h4> 
      </div> 
     </div> 
     <div class="row form-group" ng-class="{ 'has-error': submitted && branchForm.name.$error.required }"> 
      <div class="col-xs-5 form-label"> 
       <label>Roles name</label> 
      </div> 
      <div class="col-xs-6 control"> 
       <input type="text" class="form-control" ng-model="roles.rolename" name="rolename" required="" /> 
      </div> 
     </div> 

     <div class="row form-group"> 
      <div class="col-xs-5 form-label"> 
       <label>Status</label> 
      </div> 
      <div class="col-xs-6 control"> 
       <select class="form-control" ng-model="roles.status" name="status"> 
        <option value="1">Active</option> 
        <option value="0">Deleted</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div>  
<div class="row"> 
    <div class="col-xs-10"> 
     <div class="branch-table"> 
      <table class="table table-bordered"> 
       <colgroup> 
        <col width="20%"> 
        <col width="20%"> 
        <col width="20%"> 
        <col width="20%"> 
        <col width="20%"> 
       </colgroup> 
       <thead> 
        <tr> 
         <th>Transaction</th> 
         <th>No Access</th> 
         <th>Read Only</th> 
         <th>Read/Write</th> 
         <th>Full</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td><label for="Accounting"><input  type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Accounting</label></td> 
         <td><input type="radio" name="group1" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td> 
         <td><input type="radio" name="group1" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group1" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group1" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>       
        </tr> 
        <tr> 
         <td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Property</label></td> 
         <td><input type="radio" name="group2" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td> 
         <td><input type="radio" name="group2" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group2" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group2" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>       
        </tr> 
        <tr> 
         <td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction.name">Contact</label></td> 
         <td><input type="radio" name="group3" ng-model="roles.transaction.access.noaccess" data-ng-value="true" /></td> 
         <td><input type="radio" name="group3" ng-model="roles.transaction.access.read_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group3" ng-model="roles.transaction.access.write_permit" data-ng-value="true" /></td> 
         <td><input type="radio" name="group3" ng-model="roles.transaction.access.full" data-ng-value="true" /></td>       
        </tr> 

       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-xs-4 form-group"> 
     <div class="pull-left"> 
      <button type="submit" class="btn btn-sm btn-primary">Save</button> 
      <button ng-click="cancel()" class="btn btn-sm btn-default">Cancel</button>   
     </div> 
    </div> 
</div> 
</form> 
</section> 

當點擊Save我收到這樣的對象，

{ 
"rolesname": "superadmin", 
"status": 1, 

"transaction": [ 
    { 
     "name": "property", 
     "access": { 
      "noaccess": "true", 
     } 
    } 
] 

} 

我在同一時間只得到了一個對象。

我想這樣的對象，

對象數據：

{ 
"_id": "ROLE01", 
"description": "superadmin", 
"status": "active", 

"transaction": [ 
    { 
     "name": "property", 
     "access": { 
      "read_permit": "true" 
     } 
    }, 
    { 
     "name": "property", 
     "access": { 
      "read_permit": "true" 
     } 
    } 
    { 
     "name": "property", 
     "access": { 
      "read_permit": "true" 
     } 
    } 
] 

} 

我沒有得到該交易三個對象。如何在角度上實現這一點，我不知道我在做什麼worng。感謝進步。

Answer 1

您在同一個對象上綁定相同的屬性。在你的例子中，transaction是一個對象，而不是一個數組。 Group1值由group2值覆蓋，然後由group3值覆蓋。

這可以解決你的問題：

<tr> 
    <td><label for="Accounting"><input  type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[0].name">Accounting</label></td> 
    <td><input type="radio" name="group1" ng-model="roles.transaction[0].access.noaccess" data-ng-value="true" /></td> 
    <td><input type="radio" name="group1" ng-model="roles.transaction[0].access.read_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group1" ng-model="roles.transaction[0].access.write_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group1" ng-model="roles.transaction[0].access.full" data-ng-value="true" /></td>       
</tr> 
<tr> 
    <td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[1].name">Property</label></td> 
    <td><input type="radio" name="group2" ng-model="roles.transaction[1].access.noaccess" data-ng-value="true" /></td> 
    <td><input type="radio" name="group2" ng-model="roles.transaction[1].access.read_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group2" ng-model="roles.transaction[1].access.write_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group2" ng-model="roles.transaction[1].access.full" data-ng-value="true" /></td>       
</tr> 
<tr> 
    <td><label for="Accounting"><input type="checkbox" id="Accounting" ng-true-value="Accounting" ng-model="roles.transaction[2].name">Contact</label></td> 
    <td><input type="radio" name="group3" ng-model="roles.transaction[2].access.noaccess" data-ng-value="true" /></td> 
    <td><input type="radio" name="group3" ng-model="roles.transaction[2].access.read_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group3" ng-model="roles.transaction[2].access.write_permit" data-ng-value="true" /></td> 
    <td><input type="radio" name="group3" ng-model="roles.transaction[2].access.full" data-ng-value="true" /></td>       
</tr>