使用ngclick编辑重复项目

Question

我正在学习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>

现在我被困住了.我希望能够点击一个人并将他们的参加字段从false更新为true.我知道我可以像这样使用ng-click

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

但是没有线索如何更新我点击的人在$ scope.people中将false更改为true.

当我实现这一目标时,我计划再使用过滤器进行另一次ng-repeat来显示那些参加但我能够做到这一点的人.

任何人都可以帮助我或给我一些建议,任何事情都会在此刻受到赞赏.

提前致谢.

我写了一个我想在这里做的例子:http : //jsbin.com/micasafetise/2/ http://jsbin.com/micasafetise/2/edit?html,js,console,output

Answer 1

你可以通过重复的人<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个人people.invited和列表中,可以更好地优化(在同一个人列表中有2个过滤器)people.attendance.

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

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

演示

或者甚至更好,你可以传递方法中的id,索引和状态,并从一个数组中拉出项目,然后推送另一个数组.