Angular JS过滤器单值答案

【问题标题】：Angular JS filter on single valueAngular JS过滤器单值
【发布时间】：2015-09-17 15:04:27
【问题描述】：

这是我尝试过的：

<section data-ng-controller="HomeController">
<table ng-repeat="item in servers | unique:'_id.idc'">
<tr>
<td> {{ item._id.idc }} </td>
</tr>
<tr ng-repeat="data in servers | filter:{_id.idc: 'LH5'}: true ">
  <td>{{data}}</td>
</tr>
</table>

这是当前的输出：

LH8
LH5
AMS

如果我删除过滤器，这里是来自 {{ data }}

的一些示例

{"_id":{"cluster":0,"idc":"LH8"},"Physical":{"SumCores":488,"SumMemory":3232},"Virtual":{"SumCores":2,"SumMemory":8}}
{"_id":{"cluster":1,"idc":"LH8"},"Physical":{"SumCores":256,"SumMemory":1024},"Virtual":{"SumCores":232,"SumMemory":469}}

为什么过滤不正确？ unique 可以正常工作，但单个过滤器不能。

编辑：我还检查了唯一过滤器是否与它发生冲突，但如果没有该过滤器，它仍然无法工作。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

对于嵌套对象，您的过滤器格式不正确。应该是：

ng-repeat="data in servers | filter: { _id: { idc: 'LH5' } }"

下面是一个有效的简化示例。

var myApp = angular.module('MyApp', []);
		
myApp.controller('MyController', ['$scope', function($scope) {
    $scope.filter = 'red';
    $scope.cars = [
        {
            make: 'Ford',
            model: 'Focus',
            year: '2012',
            colors: {
            	interior: 'red',
                exterior: 'blue'
            }
        },
        {
            make: 'Ford',
            model: 'Fusion',
            year: '2009',
            colors: {
            	interior: 'green',
                exterior: 'black'
            }
        },
        {
            make: 'Honda',
            model: 'Civic',
            year: '2011',
            colors: {
            	interior: 'red',
                exterior: 'silver'
            }
        }
    ]
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
    <label for="filter">Interior color filter: </label>
    <input type="text" ng-model="filter" id="filter" />
    <div ng-repeat="car in cars | filter: { colors: { interior: filter } }">{{ car.year }} {{ car.make }} {{ car.model }}</div>
</div>

【讨论】：

Error: [$parse:syntax] Syntax Error: Token '{' is unexpected, expecting [:] at column 25 of the expression [servers | filter: { _id { idc: 'LH5' } }] starting at [{ idc: 'LH5' } }]. http://errors.angularjs.org/1.2.28/$parse/syntax?p0=%7B&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=25&p3=servers%20%7C%20filter%3A%20%7B%20_id%20%7B%20idc%3A%20'LH5'%20%7D%20%7D&p4=%7B%20idc%3A%20'LH5'%20%7D%20%7D
修复了！ <tr ng-repeat="data in servers | filter: { _id: { idc: 'LH5' } }">

【解决方案2】：

你先添加数据

    <tr ng-repeat="data in servers | filter:{data.idc : 'LH5'}">
      <td>{{data}}</td>
    </tr>

【讨论】：

恐怕也没有用 - 这在语法上也不正确，你错过了一个“
现在试试，我已经改了

【解决方案3】：

如果你想以自己的方式使用，你需要从here添加一个JS文件

查看question了解更多详情

【讨论】：

这个位不起作用：filter:{_id.idc : 'LH5'}

【解决方案4】：

您正在按嵌套属性进行过滤，您传递给过滤器的表达式不会计算为有效的 javascript 对象。你应该这样做：

<tr ng-repeat="data in servers | filter:{_id: [{idc: 'LH5'}]}">

【讨论】：

【解决方案5】：

请阅读下面的参考资料

用于在 AngularJs 中过滤单个值

http://toddmotto.com/everything-about-custom-filters-in-angular-js/

希望对你有帮助

【讨论】：

【解决方案6】：

根据您的示例，我假设您的数据结构如下所示：

data: {
    propA: 'A',
    proB: 'B',
    _id: {
        idc: 'LH5'
    }
}

您的问题是您试图在您正在迭代的对象的子属性上获得匹配。

来自文档：

请注意，命名属性将匹配同一级别的属性仅，而特殊的 $ 属性将匹配相同的属性水平或更深。例如。一个数组项，例如 {name: {first: 'John', last: 'Doe'}} 不会被 {name: 'John'} 匹配，但会被匹配 {$: '约翰'}。

所以我会尝试：

<tr ng-repeat="data in servers | filter:{$: 'LH5'}: true ">
  <td>{{data}}</td>
</tr>

http://jsfiddle.net/kb598pby/

【讨论】：