Блог

Главная - Вопросы по программированию - Скрыть заголовки в нескольких ng -повторить, если во время фильтрации нет значений

Скрыть заголовки в нескольких ng -повторить, если во время фильтрации нет значений

#angularjs #angularjs-directive #angularjs-ng-repeat

#angularjs #angularjs-директива #angularjs-ng-repeat

Вопрос:

Я борюсь с angularjs! Вот в чем проблема. У меня есть список сотрудников из другой компании для показа. Данные такие:

 [
  {
    name : "company1",
    employees : [
        { name : "emp1"},
        {...}
    ]
  },
  { .. }
]

Я показываю их с помощью двух ng-repeat:

 <div ng-repeat="company in companies ">
    <div class="header">{{company.name}}</div>
    <div ng-repeat="employee in company.employees | filter:search">
         {{employee.name}}
    </div>
</div>

Здесь мы, я хочу избежать, во время фильтрации заголовков компании без сотрудников.

Надеюсь, вы, ребята, умнее меня 🙂

Ответ №1:

 <div ng-repeat="company in companies ">
<div class="header" ng-show="results.length>0"> {{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search as results">
     {{employee.name}}
</div>

Объяснение: после фильтрации ваши отфильтрованные данные будут сохранены в ressults , которые мы можем использовать, чтобы решить, показывать название компании или нет

Ответ №2:

Попробуйте это, я также прикрепил демонстрацию.

  ng-show="(company.employees | filter:search).length"
  

 var app = angular.module('app', []);


app.controller('myctrl', function() {
  var vm = this;
  vm.companies = [{
    name: "company1",
    employees: [{
      name: "emp1"
    }, {
      name: "poiuy"
    }, {
      name: "asdf"
    }]
  }, {
    name: "company2",
    employees: [{
      name: "ghj"
    }, {
      name: "jkl"
    }, {
      name: "ooo"
    }]
  }];
});  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="myctrl as ct">
    <input ng-model="ct.search">
    <div ng-repeat="company in ct.companies ">
      <div class="header" ng-show="(company.employees | filter:ct.search).length">{{company.name}}</div>
      <div ng-repeat="employee in company.employees | filter:ct.search">
        {{employee.name}}
      </div>
    </div>
  </div>
</body>