搜索元素列表时，角度过滤器显示不匹配的值答案

【问题标题】：Angular Filter Shows Not Matched Values When Search On List Of Elements搜索元素列表时，角度过滤器显示不匹配的值
【发布时间】：2018-01-05 07:40:29
【问题描述】：

实际上，我一直在尝试在我的应用程序中实现一些自定义下拉搜索功能。这个下拉列表包含许多这种格式的版本。请不要将这个问题视为重复，因为我在通过现有的相关解决方案并且没有解决方案可以解决我的问题后提出这个问题。我提前非常感谢。

16.2(2) 16.2(1.11) 16.1(0) 12.7(3)M1 12.7(4)M1 12.7(5)M1 15.9(3) 15.7(3)M1 15.7(4)M1 15.7(5)M1

并且用户可以使用输入框搜索自己需要的值进行选择。喜欢

现在我正在尝试搜索与 12 匹配的值，然后作为响应的一部分，我也得到 16 个匹配值，但根据我的客户要求它不应该发生，因此应该只显示 12 个匹配相关值。请参阅下面的这些图像以获取具有无关搜索值的不匹配响应

这是我的代码库脚本文件：

var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function ($scope) {
    $scope.versionLi = [["217233", "16.2(2)", "0", "Class"], ["217220", "16.2(1.11)", "1", "Class"], ["212675", "16.1(0)", "2", "Class"], ["228973", "12.7(3)M1", "4", "Class"], ["228973", "12.7(4)M1", "4", "Class"], ["228973", "12.7(5)M1", "4", "Class"], ["231350", "15.9(3)", "3", "Class"], ["228973", "15.7(3)M1", "4", "Class"], ["228973", "15.7(4)M1", "4", "Class"], ["228973", "15.7(5)M1", "4", "Class"]];
});

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-filter-filter-production</title>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
    <script type="text/javascript" src="myApp.js"></script>
</head>

<body ng-app="appOne">
    <label>Search: <input ng-model="searchText"></label>
    <table id="searchTextResults" ng-controller="controllerOne">
        <tr ng-repeat="friend in versionLi | filter : searchText ">
            <td>{{friend[1]}}</td>
        </tr>
    </table>
</body>

</html>

【问题讨论】：

标签： angularjs angular-ui-router angularjs-scope angular-filters

【解决方案1】：

首先，您尝试在数组的整个对象中搜索给定索引，因此它会返回与给定搜索字段匹配的任何属性的对象。

例如，当您搜索 12 时，它也会返回 16.1(0)，因为它的对象在第 0 个索引值中包含 '12' --> ["212675", "16.1(0)", "2", "Class"] => "212675"

由于您的意图是仅显示给定源数组的第一个元素，因此我将它们放在单独的数组中，以使过滤器仅对所需的值起作用，如下所示。

$scope.toFilterList = [];
  for (var i = 0; i < $scope.versionLi.length; i++) {
    var obj = $scope.versionLi[i];
    //console.log(obj[1]);
    $scope.toFilterList.push(obj[1]);
  }

现在我们可以简单地对显示的值数组应用搜索过滤器。请在下面找到工作演示。

var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function($scope) {
  $scope.versionLi = [
    ["217233", "16.2(2)", "0", "Class"],
    ["217220", "16.2(1.11)", "1", "Class"],
    ["212675", "16.1(0)", "2", "Class"],
    ["228973", "12.7(3)M1", "4", "Class"],
    ["228973", "12.7(4)M1", "4", "Class"],
    ["228973", "12.7(5)M1", "4", "Class"],
    ["231350", "15.9(3)", "3", "Class"],
    ["228973", "15.7(3)M1", "4", "Class"],
    ["228973", "15.7(4)M1", "4", "Class"],
    ["228973", "15.7(5)M1", "4", "Class"]
  ];
  
  $scope.diffArray = [
    {"id":"217233", "value":"16.2(2)","index":"0", "type":"Class"},
    {"id":"217220", "value":"12.2(1.11)","index": "1","type":"Class"},
    {"id":"212675", "value":"16.9(0)","index": "2", "type":"Class"}
  ];
  
  $scope.toFilterList = [];
  for (var i = 0; i < $scope.versionLi.length; i++) {
    var obj = $scope.versionLi[i];
    //console.log(obj[1]);
    $scope.toFilterList.push(obj[1]);
  }
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-filter-filter-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
  <script type="text/javascript" src="myApp.js"></script>
</head>

<body ng-app="appOne">
  <label>Search: <input ng-model="searchText"></label>
  <table id="searchTextResults" ng-controller="controllerOne">
    <tr ng-repeat="friend in toFilterList | filter : searchText ">
      <td>{{friend}}</td>
    </tr>
  </table>
  
  <label>Search 2 for key value object array <input ng-model="search.value"></label>
  <table id="searchTextResults" ng-controller="controllerOne">
    <tr ng-repeat="obj in diffArray | filter : search ">
      <td>{{obj.value}}</td>
    </tr>
  </table>
</body>

</html>

【讨论】：

嗨 Angular_10，感谢您的快速响应，它几乎达到了我的要求，但是当我从下拉列表中选择值时，我也需要该对象，那时我用来收集整个对象（在该值后面）而不仅仅是单个值。请问对此有什么想法吗？我接受你的回答并投票了。
@Venki 您可能希望将键放入对象数组以获得过滤和访问对象的全部要求。基本上它应该是键：值对到目前为止，您的数组只是值和索引难以过滤或维护的键。
您能否给我建议一下响应数据结构，然后我将与后端团队合并以将这样的格式数据发送到我的 Angular 应用程序中。
尝试为对象数组分配一些键，例如 $scope.versionLi = [ {"id":"217233", "value":"16.2(2)","index":"0" , "type":"Class"}, {"id":"217220", "value":"16.2(1.11)","index": "1","type":"Class"}, {"id “：”212675，“值”：“16.1（0）”，“索引”：“2”，“类型”：“类”}]；根据您的可行性。
请查看更新后的答案，了解如何通过键值对象数组实现过滤和整个对象。希望对您有所帮助

【解决方案2】：

感谢 Angular_10 对我的要求做出了非常接近的回答，正如我们在个人聊天室中讨论的那样，即使我们用键和值格式更改响应结构，如果任何下拉值都具有搜索值作为它的一部分，那么那些值也显示为该搜索过滤器的一部分。所以，在 stackoverflow 上花了一些时间后，我找到了我正在寻找的东西

这段代码sn-p -

var appOne = angular.module('appOne', ['ngRoute']);
appOne.controller('controllerOne', function($scope) {
  $scope.versionLi = [
    ["217233", "16.2(2)", "0", "Class"],
    ["217220", "16.2(1.11)", "1", "Class"],
    ["212675", "16.1(0)", "2", "Class"],
    ["228973", "12.7(3)M1", "4", "Class"],
    ["228973", "12.7(4)M1", "4", "Class"],
    ["228973", "12.7(5)M1", "4", "Class"],
    ["231350", "15.9(3)", "3", "Class"],
    ["228973", "15.7(3)M1", "4", "Class"],
    ["228973", "15.7(4)M1", "4", "Class"],
    ["228973", "15.7(5)M1", "4", "Class"]
  ];
  
  
  $scope.startsWith = function (actual, expected) {
		var lowerStr = (actual + "").toLowerCase();
		return lowerStr.indexOf(expected.toLowerCase()) === 0;
	}
		
  $scope.diffArray = [
    {"id":"217233", "value":"16.12(2)","index":"0", "type":"Class"},
    {"id":"217220", "value":"12.2(1.11)","index": "1","type":"Class"},
    {"id":"212675", "value":"16.9(0)","index": "2", "type":"Class"}
  ];
  
  $scope.toFilterList = [];
  for (var i = 0; i < $scope.versionLi.length; i++) {
    var obj = $scope.versionLi[i];
    //console.log(obj[1]);
    $scope.toFilterList.push(obj[1]);
  }
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-filter-filter-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
  <script type="text/javascript" src="myApp.js"></script>
</head>

<body ng-app="appOne">
  <label>Search: <input ng-model="searchText"></label>
  <table id="searchTextResults" ng-controller="controllerOne">
    <tr ng-repeat="friend in toFilterList | filter : searchText ">
      <td>{{friend}}</td>
    </tr>
  </table>
  
  <label>Search 2 for key value object array <input ng-model="search.value"></label>
  <table id="searchTextResults" ng-controller="controllerOne">
    <tr ng-repeat="obj in diffArray | filter : search:startsWith ">
      <td>{{obj.value}}</td>
    </tr>
  </table>
</body>

</html>

【讨论】：