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

Question

在我的控制器中，我有一组对象（我才刚刚开始，如果这太天真了，请原谅我）：

$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}}, increment的颜色，link.votes如果他们已经投票则不允许增加，等等）。我知道我需要定义函数，$scope但我只是不确定它会是什么样子，所以非常感谢帮助。谢谢。

score 2 · Accepted Answer

一种方法是必须updateProperties有一个参数，该参数是与投票相关的投票的唯一标识符。处理点击的逻辑将驻留在内部updateProperties，这将由您根据自己的需要进行定义。该函数只是一个标准的 javascript 函数，可以在控制器内部定义，例如

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

查看Angular Docs及其主页上的模型（我认为主页上的模型可能对您有用）。

score 0 · Accepted Answer

一个更简单的方法是使用 $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);
}

2 回答 2