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

【问题标题】：Exact text filtering while using selection box in angularjs在angularjs中使用选择框时进行精确的文本过滤
【发布时间】：2013-07-12 20:40:52
【问题描述】：

我有一个带有某种状态的选择框，根据状态的变化，该项目应该被迭代，但问题是 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 函数并停在那里，因为我没有进一步的想法。

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

【问题讨论】：

如果答案解决了您的问题，您能否将问题标记为已回答？

标签： angularjs

【解决方案1】：

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

你有一些选择：

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

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

【讨论】：

请注意区分大小写的过滤器相对较新。例如。 1.0.7 不支持它
@alfrescian 啊。不知道这个。
感谢您的解决方案:)

【解决方案2】：

您需要实现自己的过滤器，因为 Angular 的默认过滤器使用 toLowerCase()。某事喜欢

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

Angular 1.0.7 的 JsFiddle：http://jsfiddle.net/alfrescian/7sMQ8/

【讨论】：

我也会尝试这个选项。谢谢:)