javascript - 使用 ng-click 和 ng-repeat 动态创建过滤器

Question

现在，我有一堆过滤器，它们使用 ng-click 来过滤从工厂拉入的一些 JSON 数据:

<ul class="brands">
    <li><a href="#" ng-click="brandFilter = null">All</li>
    <li><a href="#" ng-click="brandFilter = { 'manufacturer' : 'Apple' }">Apple</a></li>
    <li><a href="#" ng-click="brandFilter = { 'manufacturer' : 'Samsung' }">Samsung</a></li>
    <li><a href="#" ng-click="brandFilter = { 'manufacturer' : 'HTC' }">HTC</a></li>
</ul>
<div ng-controller="phonesController">
    <div class="phonesContent">
        <article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
            <img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
            <p>{{ phones.name }}</p>
            <p>Price: ${{ phones.price }}</p>
            <p>No term: ${{ phones.no-term }}</p>
        </article>
    </div>
</div>

它运行良好，但我想知道如何以编程方式生成链接并使用 ng-click 进行过滤。迄今为止我最好的尝试:

<div ng-controller="phonesController">
    <ul class="brands">
        <li><a href="#" ng-click="brandFilter = null">All</li>
        <li ng-repeat="phones in phoneData | unique: 'manufacturer'"><a href="#" ng-click="brandFilter = { 'manufacturer' = phones.manufacturer }">{{ phones.manufacturer }}</a></li>
    </ul>
    <div class="phonesContent">
        <article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
            <img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
            <p>{{ phones.name }}</p>
            <p>Price: ${{ phones.price }}</p>
            <p>No term: ${{ phones.no-term }}</p>
        </article>
    </div>
</div>

链接正确生成，数据显示在phonesContent div中，但过滤不起作用。我不断收到 $parse:syntax 错误，因此我的表达式有问题，其中 brandFilter = { 'manufacturer' = Phones.manufacturer } (我认为)。

Answer 1

Rob 指出了为什么你的代码不起作用，但我想说最好避免在指令中使用赋值语句。这样 Controller 的接口(interface)就被明确定义了。

我建议向您的 Controller 添加一个范围函数 setFilter() 来设置过滤器值:

$scope.setFilter = function (value) {
    $scope.brandFilter = value ? { manufacturer: value } : null;
};

然后你可以这样做:

<li><a href="#" ng-click="setFilter(null)">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">
<a href="#" ng-click="setFilter(phones.manufacturer)">{{ phones.manufacturer }}</a>
</li>