Question

我有一个场景，我需要搜索过滤后的值。以下是代码

    var app = angular.module('MainModule', []);

    app.controller('MainCtrl', function($scope) {
      $scope.searchText = '';

      $scope.items = [
        "Try_1",
        "Try_2",
        "Try_3"
      ]
    });

    app.filter('remove', function() {
      return function(text) {
        if (text) {
          return text.replace('_', ' ');
        }
      }
    })

HTML

    <body ng-controller="MainCtrl">
      <input type="text" ng-model="searchText">
      <div data-ng-repeat="x in items | filter:searchText"> {{x|remove}} </div>
    </body>

当我试图搜索“尝试1”时，没有显示结果，
但对于“try_1”，它显示“try 1”。
当我们搜索“try 1”时，是否有任何解决方法显示“try 1”。

这是plunker link。

Answer 1

过滤器适用于原始数组，因此即使用空格替换'_'，原始数组也不会受到影响，所以最好更改数组并尝试下面的代码。

<强> app.js

 app.controller('MainCtrl', function($scope) {
          $scope.searchText = '';

          $scope.items = [
            "Try_1",
            "Try_2",
            "Try_3"
          ]

           $scope.items= $scope.items.map(function(text) {
              return text.replace('_', ' ');

           })
        });

<强> HTML

 <div data-ng-repeat="x in items | filter:searchText"><p>{{x}}</p></div>

Answer 2

我喜欢你的问题，我也尝试找到解决方案，我找到了两个选项：

将您的模型更改为object
使用factory代替filter作为示例

＆＃13;

var app = angular.module("app", []);

app.filter('remove', function() {
  return function(object) {
    if (object) {
      object["search"] = object["name"].replace('_', ' ');
      return object["search"];
    }
  }
})

app.factory("search", function() {
  var factory = {};

  factory.searchAble = function(array) {
    var output = [];
    angular.forEach(array,
      function(item) {
        const removeUnderLine = item.replace('_', ' ');
        var object = {};
        object["name"] = item;
        object["search"] = removeUnderLine;
        output.push(object)
      });

    return output;
  }

  return factory;
});


app.controller("ctrl", function($scope, search) {

  $scope.searchText = '';

  //change array text to array object
  $scope.items = [{
      name: "Try_1"
    },
    {
      name: "Try_2"
    },
    {
      name: "Try_3"
    }
  ];

  //put array text to factory handler
  var items2 = [
    "Try_1",
    "Try_2",
    "Try_3"
  ];

  //scope result
  $scope.items2 = search.searchAble(items2);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h3>option 1: change array text to array object</h3>
  <input type="text" ng-model="searchText">
  <div data-ng-repeat="x in items | filter:searchText"> {{x|remove}} </div>
  <hr />
  <h3>option 2: use factory instead filter</h3>
  <input type="text" ng-model="searchText2">
  <div data-ng-repeat="x in items2 | filter: searchText2"> {{x.search}} </div>

</div>

＆＃13;

搜索angularjs中的过滤值

2 个答案: