как получить список выбранных элементов в 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}]; 

Выглядит как ниже

То, что я хочу сделать я могу выбрать несколько элементов и нажав кнопку OK, я могу получить список выбранных элементов. поэтому если я выбираю идентификатор 1 и идентификатор 2, то я хочу, чтобы вернуть список [{ID: 1}, {ID: 2}]

Как я мог осуществить это в angular.js

Answer 1

Well Я предполагаю, что если вы перебираете коллекцию людей, использующих ng-repeat, вы можете добавить директиву ng-click на каждый элемент, чтобы переключить свойство вашего объекта, допустим, .

Затем на клик по вашему OK кнопку, вы можете отфильтровать все люди, которые имеют свойство выбрано значение ИСТИНА.

Вот фрагмент кода реализации:

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