Angular 搜索元素列表时筛选器显示不匹配的值

Question

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

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

并且用户可以使用 select 的输入框搜索他需要的值。喜欢

现在，我正在尝试搜索与 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>

Answer 1

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

例如，当您搜索 12 时，它还会 returns 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]);
  }

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

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>

Answer 2

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

这段代码片段-

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>

Angular 搜索元素列表时筛选器显示不匹配的值

Angular Filter Shows Not Matched Values When Search On List Of Elements

angularjs

angular-ui-router

angularjs-scope

angular-filters