Question

我有一个具有某种状态的选择框，根据状态的变化，该项应该被迭代，但问题是angularjs过滤器功能与精确文本不匹配。

HTML

<body ng-controller="sampleController">
<div>
<select ng-model="test" ng-change="getfilter()">

  <option ng-repeat="item in list">{{item.status}}</option>

</select>
<ul>

  <li ng-repeat="item in list | filter:test">{{item.name}}</li>

</ul>
<div>{{test}}</div>

控制器

function sampleController($scope){

   $scope.list = [
  {name: "item1", status: "shipped"},
  {name: "item2", status: 'Partially Shipped '}
  ];

  $scope.getfilter = function(){



  }

}

jsbin：http://jsbin.com/amuwol/2/edit

当我选择'已发货'状态时，我只需要获取'item1'，但目前我同时获得'item1'和'item2'。我刚刚定义了getfilter函数并停在那里，因为我没有想到继续前进。

请为我提供进一步的解决方案

Answer 1

过滤器可以正常工作。这不是您面临的问题的原因。当您在选择标记中选择shipped时，还会显示第二个选项的原因是因为第二个项目的状态包含“已发货”字样 - “部分已发货”。此外，您已选择不区分大小写的选项。

你有一些选择：

使用不同的状态，例如指示物品是出货还是部分出货的数字。确保不会在多个状态中出现子字符或数字。这样，选择一个选项确实会过滤掉不相关的项目。
首选选项 - 将第三个参数传递给过滤器。第三个参数将告诉过滤器它是否应区分大小写。所以你可以使用类似的东西：
<li ng-repeat="item in list | filter:test:true">
“true”参数告诉Angular区分大小写。如果您将Partially Shipped"更改为"partially shipped"而不是{{1}}，则会失败，也就是说，使用小写“已发货”而不是大写字母。
Bin

编辑：正如下面所指出的，目前在AngularJS的稳定版本中不支持设置“true”参数以允许过滤器区分大小写

Answer 2

您需要实现自己的过滤器，因为angular的默认过滤器使用toLowerCase（）。某事。像

filters.filter('exactString', function() {
return function(string, term) {
    return ('' + string).indexOf(term) > -1;
}});

JsFiddle for angular 1.0.7：http://jsfiddle.net/alfrescian/7sMQ8/

使用angularjs中的选择框时进行精确的文本过滤

2 个答案: