根据项目在ANGULAR中的键为其添加一个字符串

put a string to an item depending on its key in ANGULAR

本文关键字：添加 字符串 一个 项目 ANGULAR      更新时间：2023-09-26

我有一个对象数组。

$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

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

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

它可以进行大量重构和优化，但我还是保留了它，希望能让我们了解一下它是如何工作的。

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

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

主要的解决方案是首先正确定义数组（上面的代码缺少equals，对象定义缺少一些分号）：

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重复上，您需要实际输出内部的内容，以便它显示，否则，它将重复空的p:

<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。

相关文章：