angularJS - 如何仅按对象中的一项进行过滤答案

【问题标题】：angularJS - How to filter by one item in object onlyangularJS - 如何仅按对象中的一项进行过滤
【发布时间】：2015-07-31 07:23:51
【问题描述】：

在这个 JSFiddle (https://jsfiddle.net/eug0taf9/9/) 中，我选择了一个评级并希望显示一个图像。

发生了什么？

当我选择评级“高”时，会显示 2 张图片而不是 1 张，因为过滤器正在捕捉类别“高”并且还描述类别“低”中的图像的“高”。

我预计会发生什么？

在选择评级“高”时，我只想过滤类别。我也不需要按描述过滤。

关于如何解决这个问题的任何建议？

HTML 代码：

<div ng-app="myApp" ng-controller="myCtrl">
    <span>Select a rating</span>
    <select ng-model="catselect"
            ng-options="category for category in imageCategories"
            ng-change="valueSelected(catselect)">
        <option value>All</option>
    </select>
    <!--<p>Select <input ng-model="categories"/></p>-->

    <ul class="photosmenu">
        <li ng-repeat="image in images | filter : catselect" ng-click="setCurrentImage(image)">
            <img ng-src="{{image.image}}" alt="{{image.stars}}" width="300px"/>
        </li>
    </ul><!-- End of List -->
</div>

角度代码：

var mod = angular.module("myApp", []);

mod.controller("myCtrl", function($scope){
    $scope.images = [
        {category: 'High', image: 'img/1.png', description: 'Random Photo', stars: '4/5'},
        {category: 'Medium', image: 'img/6.png', description: 'ApplePhoto', stars: '3/5'},
        {category: 'Low', image: 'img/13.png', description: 'High Top Photo', stars: '2/5'},
        {category: 'None', image: 'img/16.png', description: 'Kilt Photo', stars: '0/5'}];

    $scope.currentImage = $scope.images[0];
    $scope.imageCategories = ["High", "Medium", "Low", "None"];

    $scope.valueSelected = function (value) {

        if (value === null) {
            $scope.catselect = undefined;
        }
    };    

});

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

这是因为您有一个全局匹配过滤器，它将匹配所有属性，如果您想过滤特定属性，请相应地设置您的过滤器对象。即

<li ng-repeat="image in images | filter :{category: catselect}"

Demo

或者你也可以将你的 ng-model 设置为一个对象，

<select ng-model="catselect.category"

然后做：

<li ng-repeat="image in images | filter :catselect"

Demo

查看documentation:

string: 字符串用于匹配数组的内容。将返回数组中与该字符串匹配的所有字符串或具有字符串属性的对象。这也适用于嵌套对象属性。谓词可以通过在字符串前面加上!来否定。

对象：模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回一个项目数组，这些项目的属性名称包含“M”，属性电话包含“1”。可以使用特殊的属性名称 $（如在 {$:"text"} 中）接受与对象的任何属性或其嵌套对象属性的匹配。这相当于上面描述的与字符串的简单子字符串匹配。谓词可以通过在字符串前面加上 ! 来否定。例如 {name: "!M"} 谓词将返回属性名称不包含 "M" 的项目数组。

【讨论】：