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

用户可以使用输入框选择搜索所需的值。喜欢

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

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

例如，当您搜索12时，它也返回16.1（0），因为其对象在第0个索引值中包含“12” - ＆gt; ["212675", "16.1(0)", "2", "Class"] =＆gt; “2的 12 675”

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

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

Answer 2

谢谢，Angular_10假设我的要求非常接近，正如我们在个人聊天室上讨论的那样，即使我们使用键和值格式更改响应结构，即使任何具有搜索值的下拉值作为其一部分，那么那些值也显示为该搜索过滤器的一部分。所以，花了一些时间在stackoverflow上后，我得到了一个我正在寻找的解决方案

此代码段 -

＆＃13;

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]);
  }
});

＆＃13;

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

＆＃13;

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

2 个答案: