0

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

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

4

2 回答 2

3

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

你有一些选择：

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

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

于 2013-07-12T12:29:06.207 回答
1

您需要实现自己的过滤器，因为 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/

于 2013-07-12T12:16:30.983 回答