Question

我有一个这样的结构，如果在过滤后内部重复div内没有元素，我想隐藏分隔符（比如检查theme.items.length === 0但是过滤后）

var appBundle = new ScriptBundle("~/bundles/app").Include(...);
var environment = ConfigurationManager.AppSettings["environmentName"];
appBundle.Include($"~/js/config.{environment}.js");
bundles.Add(appBundle);

我尝试将当前范围传递给myCustomFilter并从那里更改showDivider属性，但是一旦它隐藏了元素，它就不会在更改searchQuery时正确显示它。

Answer 1

一种方法是将过滤后的结果分配给模板中的变量：

<div ng-repeat="item in (filteredItems = (theme.items | myCustomFilter: searchQuery: this) )">

然后您可以使用该变量（通过范围限制）来打印长度或使用if用于其他目的：

<div> count: {{ filteredItems.length }} </div>

您可以查看此答案以获取更多详细信息：AngularJS - how to get an ngRepeat filtered result reference

Answer 2

您可以使用自定义过滤器实现此目的。

检查下面的代码段，如果搜索完成，过滤器将返回一个空数组。通过检查响应的长度，您可以显示/隐藏分隔符元素。

  var app =angular.module('app', []);
  app.controller('MainCtrl', function($scope) {

  $scope.search= '';

  var myObj = [
                {
                  "name": "theme1",
                  "items": [{"name":"red"}]
                }
            ] 

  $scope.myObj = myObj;

}).filter('propFilter', function() {
return function(prop, searchTerm) {
  
  var filteredProps = [];
  
  if(searchTerm === "")
  {
    return prop;
  }
  else
  {
    return filteredProps;
  }
}
  })

  <html ng-app="app">
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
</head>
<body  ng-controller="MainCtrl">
 
<div class="input-group">
      <label>Search </label>
      <input type="text" class="form-control" ng-model="search" search-box="" />
    </div>
  <div ng-repeat="theme in myObj">
  <div class="item item-divide" ng-show="filteredProps.length > 0">{{theme.name}}</div>
    <div ng-repeat="item in theme.items | propFilter: search as filteredProps">
    {{item.name}}
  </div>
  <div>
  </div>
</div>
</body>
</html>

如果重复的兄弟在过滤后没有内部元素，Angular会隐藏div

2 个答案: