javascript - Angular - 组件中的函数对于 ng-repeat 无法正常工作

Question

我是 Angular 初学者，正在开发一个可以对书籍进行评分的简单应用程序。有一次我尝试将函数插入组件内部的 Controller 时遇到了这个问题。该函数应该增加“喜欢”数量并将其显示在“喜欢”类的段落中。然而，当我添加 ng-click 函数时，它似乎正在更改前一个元素的值(例如，当我单击元素 1 上的“喜欢”时，元素 0 中的喜欢计数器发生变化)。您能看一下并建议可能出现的问题吗？

这是组件:

angular.
module('booksList').
component('booksList', {
    templateUrl: 'books-list/books-list.template.html',
    controller: function BooksListController() {
        this.products = [
            {
                name: 'The Book of Trees',
                price: 19,
                pubdate: new Date('2009', '03', '08'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/61EQH6%2BCpuL._SX376_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Program or be Programmed',
                price: 8,
                pubdate: new Date('2013', '08', '01'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/41dKoLBVToL._SX362_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Sacred Games',
                price: 40,
                pubdate: new Date('2011', '09', '02'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/51MQoLSldhL._SX327_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0
            },
            {
                name: 'Shantaram',
                price: 20,
                pubdate: new Date('2010', '08', '02'),
                cover: 'https://images-na.ssl-images-amazon.com/images/I/51GEFhAifOL._SX332_BO1,204,203,200_.jpg',
                likes: 0,
                dislikes: 0

            }
        ];        
        this.orderProp = 'name';        
        this.plusOne = function(index) {            
            this.products[index].likes += 1;
            console.log(this.products[index].likes);            
        }
    }
});

这是我在其中使用函数的 html 模板:

<div ng-repeat="product in $ctrl.products | filter:$ctrl.query | orderBy:$ctrl.orderProp">
    <div class="thumbnail">
        <img ng-src="{{product.cover}}" alt="{{product.name}}">
        <p class="title">{{ product.name }}</p>
        <p class="price">{{ product.price | currency }}</p>
        <p class="date">{{ product.pubdate | date }}</p>
        <div class="rating">
            <p class="likes" ng-click="$ctrl.plusOne($index)">+{{product.likes}}</p>
            <p class="dislikes" ng-click="$ctrl.minusOne()">-{{product.dislikes}}</p>            
        </div>
    </div>
</div>

Answer 1

代替索引，

   ng-click="$ctrl.plusOne($index)"

传递产品本身

   ng-click="$ctrl.plusOne(product)"

并重写函数如下

    this.plusOne = function(product) {            
        product.likes += 1;
        }