How to expand first div always on sorting in angularjs-Twitter bootstrap

carreankush
January 17, 2019
133 views
0 votes
2 Answers

I have some divs which are coming from ng repeat.In which first div is open/expanded always on load.Here on click a button I am sorting divs based on id inside json. Every thing is working but when I am sorting my top divs should also be expanded and other divs should be closed.Can anyone please help me.Here is the code below

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="script.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">     
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div">      
      <div style="border:1px solid;" id="anchor{{group.id}}"  ng-repeat="group in groups | orderBy:predicate:reverse">
        <div class="parents"  ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>

        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list ">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
    <button type="button" ng-click="test()">Sort</button>
  </div>
  </body>

script

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
  $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',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 2',
      id:'2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 3',
      id:'3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 4',
      id:'4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]

    },
    {
      title: 'title 5',
      id:'6',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 6',
      id:'5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    }
  ];
  $scope.test = function() {

  $scope.predicate = 'id'; 
  $scope.reverse=true;
  }
$scope.groups[0].isOpen = true;
});

Answers

To achieve expected result , use below option

Get index of that top most object after sorting items using findIndex array method

let index = $scope.groups.findIndex(v => v.id == $scope.groups.length);
$scope.groups[index].isOpen = true;

codepen – https://codepen.io/nagasai/pen/zyQJYx

var app = angular.module("app", [
  "ui.bootstrap",
  "ngSanitize",
  "angular.filter"
]);
app.controller("AccordionDemoCtrl", function($scope, $location, $anchorScroll) {
  $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",
      id: "1",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    },
    {
      title: "title 2",
      id: "2",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    },
    {
      title: "title 3",
      id: "3",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    },
    {
      title: "title 4",
      id: "4",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    },
    {
      title: "title 5",
      id: "6",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    },
    {
      title: "title 6",
      id: "5",
      list: [
        "<i>item1a</i> blah blah",
        "item2a",
        "item3a",
        "item4a",
        "item5a",
        "item6a",
        "item7a"
      ]
    }
  ];
  $scope.test = function() {
    $scope.groups[0].isOpen = false;
    $scope.predicate = "id";
    $scope.reverse = true;
    let index = $scope.groups
      .map(function(x) {
        return x.id;
      })
      .indexOf($scope.groups.filter(v => v.id == $scope.groups.length)[0].id);
    $scope.groups[index].isOpen = true;
  };

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

<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="script.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">     
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div">      
      <div style="border:1px solid;" id="anchor{{group.id}}"  ng-repeat="group in groups | orderBy:predicate:reverse">
        <div class="parents"  ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>

        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list ">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
    <button type="button" ng-click="test()">Sort</button>
  </div>
  </body>

Try use track by $index and ng-show="$index == 0".

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

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

  }

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

  $scope.groups = [{
      title: 'title 1',
      id: '1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 2',
      id: '2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 3',
      id: '3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 4',
      id: '4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]

    },
    {
      title: 'title 5',
      id: '5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 6',
      id: '6',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    }
  ];
  $scope.test = function() {
  
    $scope.groups.forEach(a => {a.isOpen = false;});
    $scope.pristine = true;
    
    $scope.predicate = 'id';
    $scope.reverse = !$scope.reverse;

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

<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="script.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">
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div">
      <div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | orderBy:predicate:reverse track by $index">
        <div class="parents" ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
        </div>

        <ul class="childs" ng-show="($index == 0 && pristine) || group.isOpen">
          <li ng-repeat="item in group.list ">
            <span ng-bind-html="item"></span>
          </li>
        </ul>
      </div>
    </div>
    <button type="button" ng-click="test()">Sort</button>
  </div>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.