角度引導用戶界面 - 只有一個崩潰元素

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

此刻這兩個isCollapsed在$ scope對象中引用相同的屬性。如果你想要將這些分開，我會看到兩個選項。在範圍

兩個屬性

或

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

兩個NG-模型

如果你不需要知道內容是否崩潰或不在您的控制器中，你可能會把isCollapsed值放到你的html中，並刪除你的$ scope的屬性。

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

來源

2015-07-21 00:51:59

很好，謝謝！ – Brandon

布蘭登，您好。它看起來也（在完整代碼段）像你忽略了這些....
<html ng-app="ui.bootstrap.demo">
和
<div ng-controller="CollapseDemoCtrl">

看一看工作Fiddle。

來源

2015-07-21 01:16:02 AngularJR

角度引導用戶界面 - 只有一個崩潰元素

回答

相關問題