在Angular.js中，如何在点击时使用ng-repeat迭代对象列表中修改元素的属性?

In Angular.js, how do I modify the properties of an element in a list of objects iterated over with ng-repeat on click?

本文关键字：对象 列表 迭代 修改 元素 属性 ng-repeat js Angular      更新时间：2023-09-26

在我的控制器中，我有一个对象数组(我刚刚开始，如果这是非常幼稚的，请原谅我):

$scope.links = [
    {
        'votes': 6,
        'voted_on': false
    },
    {
        'votes': 7,
        'voted_on': false
    }
];

我想在视图中列出这些，并在单击时修改一些属性，保持一些复杂的状态，以反映DOM中的变化:

<ul>
    <li ng-repeat="link for links">
        <a ng-click="updateProperties()">Vote</a>
        {{link.votes}}
    </li>
</ul>

你知道，我想让updateProperties()管理很多有状态的逻辑(改变{{link.votes}}的颜色，增加link.votes，如果他们已经投票，不允许增加，等等)。我知道我需要在$scope上定义函数，但我只是不确定那会是什么样子，所以帮助会非常感激。谢谢。

一种方法是让updateProperties具有一个参数，该参数是与投票相关的民意调查的唯一标识符。处理点击所做的事情的逻辑将驻留在updateProperties中，这将由您根据自己的需要来定义。该函数只是一个标准的javascript函数，可以在控制器中定义，如

$scope.updateProperties = function(pollID){...}，只要它所在的控制器在您调用它的页面部分处于活动状态，那么您就可以使用该函数。

在主页上查看Angular文档和它们的模型(我认为主页上的一个可能对你有用)。

一种更简单的方法是使用$index来查找条目，例如

<ul>
<li ng-repeat="link for links">
    <a ng-click="toggleVotedOn($index)">Vote</a>
    {{link.votes}}
</li>

在控制器中，

$scope.toggleVotedOn = function(i) {
    $scope.links[i].voted_on = !($scope.links[i].voted_on);
}
相关文章：