javascript - Angular Bootstrap UI - Only collapsing one element -


i using angular bootstrap ui library:

https://angular-ui.github.io/bootstrap/

to create collapsable feature on site. functionality working, expand/collapse every element have collapse feature on, instead of unique element clicked.

here code:

var app = angular.module('someapp', ['ui.bootstrap']);    app.controller('collapsecontroller', ['$scope', function ($scope) {         $scope.iscollapsed = true;  };
.passinfodropdown {    margin-top: 10px;    margin-bottom: 10px;    margin-left: 5px;    font-weight: bold;  }    .dividerline {    background-color: #ded7cf;    height: 2px;  }    .passinfotablecellleft {    width: 220px;  }
<div class="dividerline"></div>  <div class="click" ng-click="iscollapsed = !iscollapsed">    <table>      <tr>        <td class="passinfotablecellleft"><div class="passinfodropdown inline">tsa information (optional)</div></td>        <td><i class="fa fa-chevron-down inline"></i></td>      </tr>    </table>    <div collapse="iscollapsed">      <div class="well well-lg">some content</div>    </div>  </div>  <div class="dividerline"></div>  <div class="click" ng-click="iscollapsed = !iscollapsed">    <table>      <tr>        <td class="passinfotablecellleft"><div class="passinfodropdown inline">loyalty programs (optional)</div></td>        <td><i class="fa fa-chevron-down inline"></i></td>      </tr>    </table>    <div collapse="iscollapsed">      <div class="well well-lg">some content</div>    </div>  </div>

how can make unique element click collapses?

at moment both iscollapsed refer same propertie on $scope object. if want separed, see 2 options.

  1. two properties in scope

    $scope.iscollapsedcontent1 = true; $scope.iscollapsedcontent2 = true; 

    or

    $scope.iscollapsed = {}; $scope.iscollapsed['content1'] = true; $scope.iscollapsed['content2'] = true; 
  2. two ng-model

if not need know whether content collapsed or not in controller, might put iscollapsed value html , remove propertie of $scope.

    <div class="click" ng-click="iscollapsedcontent1 = !iscollapsedcontent1" ng-model="iscollapsedcontent1" ng-init="iscollapsedcontent1=true"> 

Comments