Question

我不明白为什么循环上方的ng-click可以过滤数据，而第一个循环内部的ng-click不会。

我完全不知道出了什么问题

var booksAPP = angular.module（＆＃39; booksAPP＆＃39;，[]）;

    booksAPP.controller('booksCTRL', function($scope) {
        $scope.bookData = {
            books: [
                {name: "JS learn", tag: "js", category: "javascript"},
                {name: "PHP learn", tag: "php", category: "php"},
                {name: "JS Ninja", tag: "js", category: "javascript"},
                {name: "HTML Ninja", tag: "html", category: "HTML"}
            ]
        };

        $scope.bookTAG = {
            tags: [
                {name: 'js'},
                {name: 'php'},
                {name: '.NET'},
                {name: 'HTML'}
            ]
        }

    })

<span ng-click="clickTAG = {'tag':'js'}">THIS WORKS NICE BEACUSE THEY BEFORE REPEAT</span>

<ul>
    <li><strong>TAGS:</strong></li>
    <li ng-repeat="tag in bookTAG.tags" ng-click="clickTAG = {'tag': tag.name}">{{tag.name}}</li>
</ul>

<ul>
    <li><strong>BOOKS:</strong></li>
    <li ng-repeat="book in bookData.books | filter:clickTAG">{{book.name}}</li>
</ul>

Answer 1

ng-repeat生成的每个元素都有自己的范围，包含其他$index，$first等字段，以及book变量。所以，如果你在ng-repeat里面做了

ng-click="clickTAG = {'tag': tag.name}"

在ng-repeated元素的范围内设置clickTAG字段，而不是将其设置为控制器范围。

为了防止这种情况，并同时使代码更清洁，请将以下函数添加到控制器范围：

$scope.setClickTag = function(name) {
    $scope.clickTAG = {'tag': name};
}

并使用

ng-click="setClickTag(tag.name)"

Answer 2

因为ng-repeat创建了自己的范围，并且在编写$scope时由于clickTAG = ...的原型继承，它会在ng-repeat范围内创建一个新变量。您可以使用$parent来引用ng-repeat的父母范围：

<ul>
    <li><strong>TAGS:</strong></li>
    <li ng-repeat="tag in bookTAG.tags" ng-click="$parent.clickTAG = {'tag': tag.name}">{{tag.name}}</li>
</ul>

ng-repeat dosent查看来自ng-click外部的数据

2 个答案: