Question

我是Angular begginer并致力于一个简单的应用程序，可以评估书籍。一旦尝试将函数插入组件内的控制器，我就遇到了问题。功能应该增加喜欢＆＃39;数字，并在类似于＆＃39;喜欢＆＃39;的段落中显示。但是，当我添加ng-click功能时，它似乎正在改变前一个元素的值（例如，当我点击＆＃39;喜欢＆＃39;在元素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;
        }

Answer 2

您似乎忘了包含track by $index。

track by $index用于将您的数据与ng-repeat生成的DOM生成（主要是重新生成）相关联。

在您的情况下，$index是一个identity密钥，用于区分items中的array。

如果您没有唯一标识符，track by $index也可以提升效果。

这是working solution。

角度 - 在一个组件中的功能不适用于ng-repeat

2 个答案: