如何获取angular.js中所选项目的列表

Question

这里我使用angular.js来显示人员列表

  <div class="recipient" ng-repeat="person in people">
            <img src="{{person.img}}" /> person.name 
             <div class="email">person.email</div>
  </div>

$scope.people = [{id:1}, {id:2}, {id:3}, {id:4}];

外观如下

我想要做的是我可以选择多个项目，然后单击确定按钮，我可以获得所选项目的列表。所以如果我选择id 1和id 2，那么我想返回一个[{id：1}，{id：2}]

的列表

我怎样才能在angular.js

中实现它

Answer 1

嗯，我想如果你使用ng-repeat循环浏览一组人，你可以在每个项目上添加ng-click指令来切换你对象的属性，让我们说选择

然后点击确定按钮，您可以过滤所有选中属性设置为true的人。

以下是实施的代码片段：

<div class="recipient" ng-repeat="person in people" ng-click="selectPeople(person)">
  <img src="{{person.img}}" /> person.name 
  <div class="email">person.email</div>
</div>

<button ng-click="result()">OK</button>


function demo($scope) {

  $scope.ui = {};

  $scope.people = [{
    name: 'Janis',
    selected: false
  }, {
    name: 'Danyl',
    selected: false
  }, {
    name: 'tymeJV',
    selected: false
  }];

  $scope.selectPeople = function(people) {
    people.selected = !people.selected;
  };

  $scope.result = function() {
    $scope.ui.result = [];
    angular.forEach($scope.people, function(value) {
      if (value.selected) {
        $scope.ui.result.push(value);
      }
    });
  };

}
.recipient {
  cursor: pointer;
}

.select {
  color:green;
}

.recipient:hover {
  background-color:blue;
}
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
<div ng-app ng-controller="demo">

  <div class="recipient" ng-repeat="person in people" ng-click="selectPeople(person)" ng-class="{ select: person.selected }">
    <div class="name">{{ person.name }}</div>
  </div>

  <button ng-click="result()">OK</button>

  Result :
  <ul>
    <li ng-repeat="item in ui.result">{{ item.name }}</li>
  </ul>

</div>

Answer 2

如果您只想显示已选中或未选中，则可以应用过滤器，但如果您不想要过滤，则需要将过滤器值从undefined切换为true ;卡住不能再显示所有内容。

HTML：

<button ng-click="filterChecked()">Filter checked: {{ checked }}</button>
<div class="recipient" ng-repeat="person in people | filter:checked">
    <input type='checkbox' ng-model="person.isChecked" />
    <img ng-src="{{person.img}}" />{{ person.name }}
    <div class="email">{{ person.email }}</div>
</div>

控制器：

// Apply a filter that shows either checked or all
$scope.filterChecked = function () {
    // if set to true or false it will show checked or not checked
    // you would need a reset filter button or something to get all again
    $scope.checked = ($scope.checked) ? undefined : true;
}

如果您希望获得所有已经检查并作为表单数据提交的内容，您只需循环遍历数组：

控制器：

// Get a list of who is checked or not
$scope.getChecked = function () {
    var peopleChkd = [];
    for (var i = 0, l = $scope.people.length; i < l; i++) {
        if ($scope.people[i].isChecked) {
            peopleChkd.push(angular.copy($scope.people[i]));
            // Remove the 'isChecked' so we don't have any DB conflicts
            delete peopleChkd[i].isChecked;
        }
    }
    // Do whatever with those checked 
    // while leaving the initial array alone
    console.log('peopleChkd', peopleChkd);
};

Check out my fiddle here

请注意，person.isChecked仅在HTML中添加。