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

Question

In my controller I have an array of objects (I'm just getting started, so forgive me if this is terribly naive or something):

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

I want to list these out in the view and modify some of the properties on click, maintaining some complex state reflecting the change in the DOM:

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

You know, I would like updateProperties() to manage a lot of stateful logic (change the color of the {{link.votes}} , increment link.votes , disallow incrementing if they have already voted, etc. ). I get that I need to define the function on $scope but I'm just not sure what that would look like, so help would be much appreciated. Thanks.

Answer 1

One way would be to have updateProperties to have a parameter that is a unique identifier for the poll in which the vote is related to. The logic of dealing with what the click does will reside inside updateProperties and that will be up to you to define as per what you want. The function is just a standard javascript function and can be defined inside your controller like

$scope.updateProperties = function(pollID){...} and as long as the controller that this resides in is active in the part of the page that you call it from then you can use the function.

Check out the Angular Docs , and their mockups on the main page (I think one that's on the main page might be of use to you).

Answer 2

An easier way is to use the $index to find the item, as an example

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

And in your controller,

$scope.toggleVotedOn = function(i) {
    $scope.links[i].voted_on = !($scope.links[i].voted_on);
}