Угловой Bootstrap UI - только рушатся один элемент

Я использую угловые библиотеки начальной загрузки интерфейса:Угловой Bootstrap UI - только рушатся один элемент

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

создать разборную функцию на моем сайте. Сама функциональность работает, но она будет расширять/сворачивать каждый элемент, у меня есть функция свернуть, а не только уникальный элемент, который щелкнут.

Вот мой код:

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>

Как я могу сделать это так просто уникальный элемент я нажимаю обвалы?

источник

2015-07-21 Brandon

На данный момент оба объекта имеют статус объекта объекта scope. Если вы хотите, чтобы они были разделены, я вижу два варианта.

Два свойства в объеме

или

$scope.isCollapsed = {}; 
$scope.isCollapsed['content1'] = true; 
$scope.isCollapsed['content2'] = true;

Два нг-модель

Если вам не нужно знать, является ли содержание рухнул или нет в вашем контроллере, вы также можете поместить значение isCollapsed в свой html и удалить свойство вашей области $.

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

источник

2015-07-21 00:51:59

отлично работает, спасибо! – Brandon

Brandon, HI там. Он также выглядит (в полном фрагменте кода), как вы опустили эти ....
<html ng-app="ui.bootstrap.demo">
и
<div ng-controller="CollapseDemoCtrl">

Посмотрите на рабочем Fiddle.

источник

2015-07-21 01:16:02 AngularJR

Угловой Bootstrap UI - только рушатся один элемент

ответ

Смежные вопросы