使用ng-repeat动态创建对象，希望默认选中复选框

dynamically created object with ng-repeat - want to default that checkboxes are selected

本文关键字：默认 复选框 希望 ng-repeat 动态 创建对象 使用      更新时间：2023-09-26

所以在StackOverflow中有大量关于ng-repeat和复选框的引用。然而，我已经试过了，仍然不能得到这个工作。

我想做的是，在点击{{address.bookName}}时，默认选择通过ng-repeat填充的所有联系人。我试着添加ng-checked = true，虽然它表面上勾选了复选框，但它没有创建receivers.selected[contact.firstName]的属性和{{contact.contact}}的相应值。

<ul data-ng-repeat='address in addressBook'>
    <li>
      <a data-ng-click='showContacts = !showContacts'>{{address.bookName}}</a>
      <ul>
        <li data-ng-show='showContacts' data-ng-repeat='contact in address.addresses'>
          <label>
            <input
              type='checkbox'
              ng-model='receivers.selected[contact.firstName]'
              name='selectedReceivers[]'
              ng-true-value = '{{contact.contact}}'
              ng-false-value='null'/>
            {{contact.firstName}} {{contact.lastName}} - {{contact.contact}}
          </label>
        </li>
      </ul>
    </li>
  </ul>

在我的控制器中我有一个对象:

$scope.receivers = {
    selected: {}
};

总结:点击{{address.bookName}}，我想要地址中的所有联系人。要选择的地址，因此要用所有联系人的firstName和contact填充$scope.receivers。

data-ng-show='showContacts == $parent.$index'，这将显示所单击的book-name的特定地址。

可以使复选框被ng-checked= true选中。

在您的情况下，您可以通过使用$index (To get current / inner loop index)和$parent.$index (To get parent loop index)动态应用ng-model。

<input type='checkbox' 
               ng-model="receivers.checked[$parent.$index][$index]"
               ng-checked="true"
               ng-true-value="{{contact}}"
               ng-false-value="null" />

最后，使用angular.copy(element)复制作用域变量。

//Copy the scope variable
$scope.receivers.checked[index] = angular.copy($scope.addressBook[index].addresses);


function LoginController($scope) {
  //Declare ng-model
  $scope.receivers = {
    selected: {},
    checked: {}
  };
  $scope.showSelected = function(parentIndex, index)
  {
    //Show hide particular contacts
    $scope.showContacts = index;
    //Copy the scope variable
    $scope.receivers.checked[index] = angular.copy($scope.addressBook[index].addresses);
  }
 $scope.addressBook = [{
    "_id": 1,
    'bookName': 'Family',
    'companyID': 1234,
    'creator': 1234,
    'addresses': [{
      'contact': '1234567890',
      'firstName': 'Bob',
      'lastName': 'Smith'
    }, {
      'contact': '1234567890',
      'firstName': 'Amy',
      'lastName': 'Smith'
    }, {
      'contact': '1234567890',
      'firstName': 'John',
      'lastName': 'Smith'
    }]
  }, {
    '_id': 2,
    'bookName': 'Friends',
    'companyID': 1234,
    'creator': 1234,
    'addresses': [{
      'contact': '1234567890',
      'firstName': 'Bruce',
      'lastName': 'Wayne'
    }, {
      'contact': '1234567890',
      'firstName': 'Clark',
      'lastName': 'Kent'
    }, {
      'contact': '1234567890',
      'firstName': 'Peter',
      'lastName': 'Parker'
    }]
  }];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
  <h5 class="form-title">Select contacts:</h5>
  <ul data-ng-repeat='address in addressBook'>
    <li>
      <a data-ng-click='showSelected($parent.$index, $index)'>{{address.bookName}}</a>
      <ul>
        <li data-ng-show='showContacts == $parent.$index' data-ng-repeat='contact in address.addresses'>
          <label>
            <input type='checkbox' 
                   ng-model="receivers.checked[$parent.$index][$index]"
                   ng-checked="true"
                   ng-true-value="{{contact}}"
                   ng-false-value="null" /> {{contact.firstName}} {{contact.lastName}} - {{contact.contact}}
          </label>
        </li>
      </ul>
    </li>
  </ul>
  <h5 class="text-bold">Send to: {{receivers.checked}}</h5>
</div>

相关文章：