Редактировать элемент ng-repeat с помощью ngclick

Я изучаю Angular и пытаюсь научиться чему-то новому. Я попытался объяснить себя как можно яснее ниже - любая помощь будет высоко оценена.

Пример: http://jsbin.com/micasafetise/2/ http://jsbin.com/micasafetise/2/edit?html,js,console,output

Я создал себе этот бит данных

$scope.people = 
[
    {
    "personID": 1,
    "first_name": "Sam",
    "last_name": "Stimpson",
    "attending": false
    },
    {
    "personID": 2,
    "first_name": "Alison",
    "last_name": "van Schoor",
    "attending": true
    },
    {
    "personID": 3,
    "first_name": "Lindsay",
    "last_name": "van Schoor",
    "attending": false
    }
];

Я создал вывод в моем представлении следующим образом:

<div ng-repeat="person in people">
  <a href="" ng-click="isAttending()">
    {{person.first_name}}{{person.last_name}} - {{person.attending}}
  </a>
</div>

Теперь то, на чем я застрял. Я хочу иметь возможность щелкнуть человека и обновить его поле посещения с ложного на истинное. Я понимаю, что могу использовать ng-click вот так

$scope.isAttending = function() {
   alert("is attending");
};

но не знаю, как обновить человека, которого я щелкнул, чтобы изменить false на true в $scope.people.

Когда я добьюсь этого, я планирую провести еще один ng-repeat с фильтром, чтобы показать присутствующих, но, я думаю, я смогу сделать эту часть.

может ли кто-нибудь помочь мне или дать мне несколько советов, что-нибудь будет высоко ценится в данный момент.

Заранее спасибо.

Я написал пример того, что я пытаюсь сделать здесь: http://jsbin.com/micasafetise/2/ http://jsbin.com/micasafetise/2/edit?html,js,console,output


angularjs angularjs-ng-repeat angularjs-scope angularjs-filter
person Iamsamstimpson    schedule 10.10.2014    source источник
comment
Это не json, это объект javascript.   -  person PSL    schedule 10.10.2014

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете просто передать повторяющееся лицо <a href="" ng-click="isAttending(person)">, и ваш метод обработчика возьмет этот объект, чтобы вы могли обновить его свойство (ну, вы также можете сделать это встроенным в представлении, но лучше отделить и поместить логику в контроллер как у вас было изначально).

$scope.isAttending = function(person) {
  person.attending = true;
};

Просто добавьте фильтр в оба раздела, чтобы показать, кто все посещает, а кто нет.

<div ng-repeat="person in people | filter:{attending:false} track by person.personID">
  <a href="" ng-click="toggleAttending(person)">
    {{person.first_name}}{{person.last_name}} - {{person.attending}}
  </a>
</div>

и

$scope.toggleAttending = function(person) {
  person.attending = !person.attending;
};

Демо

В вашем случае вы, вероятно, могли бы лучше оптимизировать (у вас есть 2 фильтра для одного и того же списка людей), отфильтровав их из контроллера и заполнив 2 списка людей people.invited и people.attendance.

function updatePeopleAttendance(){
  $scope.people.attending = [];
  $scope.people.invited = [];

 angular.forEach(people, function(person){
   $scope.people[person.attending ? 'attending' : 'invited'].push(person);
 });
}

Демо

или, что еще лучше, вы можете передать идентификатор, индекс и статус в метод и вытащить элемент из одного массива и поместить его в другой.

person PSL    schedule 10.10.2014
comment
Спасибо, это было именно то, что нужно! - person Iamsamstimpson; 10.10.2014