使用ngclick编辑重复项目
我正在学习Angular,并且正在尝试构建位和bobs来学习。我试着在下面尽可能清楚地解释我自己 - 任何帮助将不胜感激。使用ngclick编辑重复项目
例子: 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单击这样
$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
你可以只通过重复的人<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);
});
}
,甚至更好,你可以通过该方法中的ID,索引和地位,拉项目出一个阵列,并推动它的另外一个。
谢谢,这正是需要的! – Iamsamstimpson 2014-10-10 15:06:48
@pixeltooth欢迎您! – PSL 2014-10-10 15:07:49
它不是json它是javascript对象。 – PSL 2014-10-10 14:06:12