Question

在这个JSFiddle（https://jsfiddle.net/eug0taf9/9/）中，我选择一个评级并期望显示一个图像。

发生了什么事？

当我选择评分＆＃39;高＆＃39;时，2个图像显示而不是1，因为过滤器正在捕捉类别＆＃39;高＆＃39;还有描述＆＃39; High＆＃39;类别中的图像＆＃39;低＆＃39;

我期待发生什么？

在选择评级＆＃34;高＆＃34;时，我只希望过滤类别。我也不需要按描述过滤它。

有关如何解决此问题的任何建议？

HTML code：

<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>

Angular Code：

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;
        }
    };    

});

Answer 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”的项目数组。

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

1 个答案: