如何在 AngularJS 1.5.11 中过滤两个（仅在视觉上）连接的表达式

Question

场景： 我有一个项目数组，每个项目都有属性 (model,id)，

$scope.arrayOfItems = [{
                         model : 'L_',
                         id : 01
                       },
                       {
                         model : 'L_',
                         id : 2323
                       },
                       {
                         model : 'L_',
                         id : 434
                       }
                    ];

对于每个项目，这两个属性合并形成一个项目 Label。我正在尝试过滤两个 VISUALLY 合并表达式

{{::item.model}}{{::item.id}}

model = 'L_';
id    = 03;

所以结果会是 L_03

如果我想在输入字段中搜索项目标签 'L_2323' 并键入 'L_'然后是id，所有列表项都消失了。

我希望能够键入 'L_2323' 并显示相应的列表项

我知道我可以遍历并合并所有模型和 ID，然后将其放入控制器中的一个数组中，然后在主项的循环中显示该数组的每个项目，但这似乎是一种浪费的解决方案，我'我正在尝试以更务实的方式解决问题

我已经添加了这个错误的代码笔
Codepen

Answer 1

基本搜索代码可以是这样的：

const arr = [{
  model: 'L_',
  id: '01'
}, {
  model: 'L_',
  id: '2323'
}, {
  model: 'L_',
  id: '434'
}];

const search = function(searchTerm) {
  return arr.filter(item => {
    const fullName = item.model + item.id;
    return fullName.includes(searchTerm);
  })
}

const searResult1 = search('01');
console.log(searResult1);

const searResult2 = search('L_');
console.log(searResult2);

https://jsfiddle.net/90Lc7dt8/8/

我们在这里做的是：

创建一个包含您要搜索的信息的变量fullName
对 return 个符合模式的项目使用过滤器

现在您只需要 angular 输入代码。

在输入中使用 ng-model
将搜索功能作为监视功能
使用ng-repeat列出结果

这是 codepen 上的一个 angular 示例： https://codepen.io/bergur/pen/yqKaKw?editors=1010#0

Answer 2

只需编写一个自定义过滤器，扫描数组以查找 model + id 的匹配项。这是它的外观的快速演示：

var app = angular.module('myApp', []);
app.filter('myFilter', function() {
  return function(arrayOfItems, input) {
    var res = [];
    if (input) {
      for (var i = 0; i < arrayOfItems.length; i++) {
        var item = arrayOfItems[i];
        if ((item.model + item.id).match(input)) { // match
          res.push(item);
        }
      }
      // don't return an empty array if nothing was found
      return (res.length > 0) ? res : arrayOfItems; 
    }
    return arrayOfItems; // default (no input given)
  };
});

app.controller('namesCtrl', function($scope) {
  $scope.arrayOfItems = [{
      model: 'L_',
      id: 01
    },
    {
      model: 'L_',
      id: 2323
    },
    {
      model: 'L_',
      id: 434
    }
  ];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="namesCtrl">

    <span>Filter your search : 
      <input type="text" ng-model="searchFilter">
      {{searchFilter}}
    </span>
    
    <hr>

    <div ng-repeat="item in arrayOfItems | myFilter: searchFilter">
      {{item.model}}{{item.id}}
    </div>
  </div>
</body>
</html>

如何在 AngularJS 1.5.11 中过滤两个（仅在视觉上）连接的表达式

How do filter two (only visually) joined expressions in AngularJS 1.5.11

angularjs

angularjs-filter