javascript - 根据 ANGULAR 中的键将字符串放入项目中

Question

我有一个对象数组。

$scope.array [
 {beast: 'rat', color: 'red', price: 5000, 'size', '100 kg'},
 {beast: 'cat', color: 'white', price: 4000, 'size', '500 kg'},
 {beast: 'bird', color: 'pink', price: 3000, 'size', '200 kg'}
]

在我的 html 中我有:

<input type='text' ng-model='search'>
<p ng-repeat = "a in array | filter: search"></p>

我想在写入文本字段时开始显示项目。我想通过文本字段仅按“动物”或“颜色”进行过滤。

但是我希望如果我写下动物名称的一部分，它就会出现，例如我写“ra”，出现在项目上:

animal -> rat

如果我写“re”，应该出现在列表中:

color -> red

但如果我写“r”，在本例中，应该出现 2 个以“r”开头的项目

animal -> rat
color -> red

这不是最好的方法，我是新 Angular 。

Answer 1

我做了一个 plunkr，可能有助于理解一些事情: http://plnkr.co/edit/jSiFb1Y0yQw5y7d06LXf

它可以进行大量重构和优化，但我将其保留下来，希望能阐明事情的工作原理。

基本上，它是一个简单的过滤器。每个过滤器首先接收项目，然后接收传递给它的任何其他参数。在里面，您可以使用任何您喜欢的解决方案。

在我的解决方案中，我在内部添加了简单的 if 条件。当然，您可以使用 regExps 或其他解决方案来解析对象。

主要的解决办法是首先正确定义数组(上面的代码少了等号，对象定义少了一些分号):

app.controller('MainCtrl', function($scope) {
  $scope.data = [
   {beast: 'rat', color: 'red', price: 5000, size: '100 kg'},
   {beast: 'cat', color: 'white', price: 4000, size: '500 kg'},
   {beast: 'bird', color: 'pink', price: 3000, size: '200 kg'}
  ];
});

然后是过滤器:

app.filter('searchData', function() {
  return function(items, searchText) {
    var results = [];

    angular.forEach(items, function(item) {
      if(item.beast.indexOf(searchText) === 0) {
        results.push('beast -> ' + item.beast);
      }

      if(item.color.indexOf(searchText) === 0) {
        results.push('color -> ' + item.color);
      }
    });

    return results;
  };
});

另外，在P元素的ng-repeat上，你需要在里面实际输出一些东西，以便它显示，否则，它是重复空Ps:

<input type='text' ng-model='search'>
<p ng-repeat = "item in data | searchData : search ">{{item}}</p>

希望这有帮助，

最诚挚的问候，

拉法。

更新如果您不希望在删除所有输入后显示结果，可以在每个之前添加一个简单的 if 即可:

app.filter('searchData', function() {
  return function(items, searchText) {
    var results = [];

    if(searchText) {
      angular.forEach(items, function(item) {
        if(item.beast.indexOf(searchText) === 0) {
          results.push('beast -> ' + item.beast);
        }

        if(item.color.indexOf(searchText) === 0) {
          results.push('color -> ' + item.color);
        }
      });
    }

    return results;
  };
});

我已经用这个解决方案更新了 plunker。