Angularjs - Как развернуть свернутый div на фильтре для динамических данных, поступающих из ng repeat - PullRequest
Новая
       1

Angularjs - Как развернуть свернутый div на фильтре для динамических данных, поступающих из ng repeat

0 голосов
/ 08 января 2019

Я использую angularjs, у меня есть некоторые div, идущие от ng repeat, а также я использую фильтр angularjs для поиска. Все div-ы сворачиваются, кроме первого div. Здесь все работает, но когда я фильтрую что-то, связанное со сворачиваемым div, оно должно раскрыться Кто-нибудь, пожалуйста, помогите мне, вот код ниже https://plnkr.co/edit/QG98UGIPzZ2PYfBYhFEx?p=preview

HTML 

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="js/index.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <body ng-app="app">
    <h1>Dynamic accordion: nested lists with html markup</h1>   
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <input type="text" ng-model="item.value">
      <div  ng-repeat="group in groups | filter:item.value">
        <div class="parents"  ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
  </div>
  </body>

index.js 

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.open = function (item) {
    $scope.groups.filter(a=> a ===item).forEach(a=>{
      a.isOpen = !a.isOpen;
    });
    $scope.closeOthers(item);

  }

  $scope.closeOthers = function (item) {
    $scope.groups.filter(a=> a !==item).forEach(a=>{
      a.isOpen = false;
    });
  }

  $scope.groups = [
    {
      title: 'title 1',

      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a']
    },
    {
      title: 'title 2',

      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'] 
    },
    {
      title: 'title 3',
      list: ['item1c',
        '<b>item2c </b> blah ',
        'item3c'] 

    },
    {
      title: 'title 4',

    },
    {
      title: 'title 5',

    }
  ];
$scope.groups[0].isOpen = true;
});

1 Ответ

0 голосов
/ 08 января 2019

Вам необходимо установить для свойства isOpen каждой группы значение true, когда кто-нибудь что-то ищет, что означает проверку значения текстового поля с помощью атрибута ng-change.

В своем HTML добавьте атрибут ng-change и назначьте ему функцию, которую вы определите в js. 

 <input type="text" ng-model="item.value" ng-change="onTextChange()">

Затем в вашем js вам нужно определить функцию onTextChange, которая проверит, если значение текстового поля не пустое, развернет каждую группу - 

$scope.onTextChange = function(item) {
   if($scope.item.value){
      $scope.groups.forEach(a=>{
        a.isOpen = true;
      });
   }
   else{
      $scope.groups.forEach(a=>{
        a.isOpen = false;
      });
      $scope.groups[0].isOpen = true;
   }
};

Обновленный код - https://plnkr.co/edit/Qk9TdZ4oUWprA8Wi2Whw?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...