Question

因此，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}}后，我希望选择address.addresses中的所有联系人，因此$scope.receivers将填充所有联系人的firstName和联系人。

Answer 1

data-ng-show='showContacts == $parent.$index'，这将显示点击的书名的特定地址。

您可以通过ng-checked= true选中复选框。

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

<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>

使用ng-repeat动态创建的对象 - 想要默认选中复选框

1 个答案: