angular js 搜索使用过滤器关键字显示按 headers 分组的数组项

Question

我正在尝试显示数组的结果:--

$scope.headerValue1 =[{title:"Source",list:[]},{title:"Target",list:[]},{title:"Local Variables",list:[]},{title:"Constants",list:[]}];

在我的搜索栏中使用 li 和 ng-repeat 标签（一个用于显示标题，然后一个用于列出该标题的每个项目）使用 filter:搜索文本框的模型名称。有个搜索框可以搜索列表items.I想要的:-

根据搜索关键字显示列表项，以便同时显示与该列表项对应的 header 标题。
如果用户在搜索框中键入特定标题，则显示所有列表项。

我给出以下代码：-

var inputString = '<span class="btn-group searchable-dropdown" data-ng-show=" true">'

+ '<button class="btn btn-sm btn-default btn-block dropdown-toggle"'
// +'data-ng-disabled="false"
// '
+ 'data-toggle="dropdown">'
+ '<span data-ng-if="true" class="ng-binding ng-scope"  >'
+ '{{curr_rules['
+ idx
+ '].rhs.args['
+ i
+ '].selectedVal}}'
+ '</span>'
// +'<!--
// end
// ngIf:
// !ruleDefinitionArgs.selectArgValue
// -->
// '
+ '<span class="caret"></span>'
+ '</button>'

+ '<ul class="dropdown-menu scrollable-menu" >'

+ '<li>'
+ '<div class="dropdown-header">'
+ '<input type="text" class="form-control input-sm ng-pristine ng-untouched ng-valid" style="width: 50%;" data-ng-click="searchBox($event);"'
// +'data-ng-model="ruleDefinition.columnFilter"
// '
+ 'data-ng-model="curr_rules['
+ idx
+ '].rhs.args['
+ i
+ '].searchField"/> '
+ '<button style="margin-left: 5px" ng-click="addConstant(curr_rules['
+ idx
+ '].rhs.args['
+ i
+ '].searchField,$event)" class="btn btn-sm btn-success">Add Constant</button>'
+ '</div>'
+ '</li>'
+ '<li class="divider"></li>'

+ '<li data-ng-repeat="headeritem in headerValue1 | filter:curr_rules['
+ idx
+ '].rhs.args['
+ i
+ '].searchField" data-ng-if="headeritem.list.length>0" ><span class="list-head"><b>{{headeritem.title}}</b></span>'
+ '<ul class="search-list-dropdown">'
+ '<li  data-ng-repeat="item in headeritem.list| filter:curr_rules['
+ idx
+ '].rhs.args['
+ i
+ '].searchField : startsWith" data-ng-click="populateValSource(curr_rules,'
+ idx
+ ','
+ i
+ ',item,headeritem.title);"'
+ 'data-ng-value=item'
+ '>'
+ '<a href="javascript:void(0)">{{item}}</a>'
+ '</li>'
+ '</ul>'
+ '</li>'

+ '</ul>'

+ '</span>');

 var input = angular.element(inputString);

我正在尝试通过动态附加此元素来实现可搜索的下拉菜单，其中有搜索文本框，下面是 ul/li 标签中显示的数据。我试过 filter 关键字，但它不能同时满足上述两个目的。需要帮助，谢谢

Answer 1

你给出的代码不清楚，所以我在下面做了一个简单的输入搜索过滤器。检查并告诉我这是否是您所期望的。

angular.module('app', [])
.controller('myCtrl', function ($scope, $compile){
  $scope.headerValue1 = [{"title":"Source","list":["attr1","attr2"]},{"title":"Target","list":["newattr2","attr3","testattr3"]},{"title":"Local Variables","list":["l1attr1","l1newattr2","l1attr3"]},{"title":"Constants","list":["c1l1attr1","c3l1attr3","c4l1testatr3"]}];
  
  var inputString = '<input type="text" ng-model="searchText">'
  + '<p>{{searchText}}</p>'
      + '<ul>'
  + '<li ng-repeat="each in headerValue1" ng-show="filtered.length">{{each.title}}'
  + '<ul>'
  + '<li ng-repeat="item in each.list | filter :searchText as filtered">{{item}}</li>'
  + '</ul>'
  + '</li>'
  + '</ul>';
  
  angular.element('#content').append(inputString);
  
 $compile(angular.element('#content').contents())($scope);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="app" ng-controller="myCtrl">
<div id="content"></div>
  
</body>

angular js 搜索使用过滤器关键字显示按 headers 分组的数组项

angular js search using filter keyword to display array items grouped by headers

javascript

search

filter

keyword-search

angularjs