選擇組

我剛開始用角和我從codepen Accordion List 選擇組

了一個代碼示例，我想用我的數據在HTML這樣的：

<div class="group"> 
    <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)"> 
    <div class="form-group"> 
     <label></label> 
     <input> 
    </div> 
    </ion-item> 
</div> 
<div class="group"> 
    <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)"> 
    <div class="form-group"> 
     <label></label> 
     <input> 
    </div> 
    </ion-item>

和JS是這樣設置的：

angular.module('my-app',['ionic']) 

.controller('main', function($scope) { 
    $scope.groups = [{ 
    name: "Basic Info", 
    items: [1,2,3]}, 
    { 
     name: "Torso Measures", 
     items: [1,2,3]}, 
    { 
     name: "Extra measures", 
     items: [1,2,3,4,5], 
    } 
    ]; 

    $scope.toggleGroup = function(group) { 
    if ($scope.isGroupShown(group)) { 
     $scope.shownGroup = null; 
    } else { 
     $scope.shownGroup = group; 
    } 
    }; 
    $scope.isGroupShown = function(group) { 
    return $scope.shownGroup === group; 
    }; 

});

問題是，只要我點擊1他們都在擴大/崩潰。在JS/jQuery中我會傳遞一個id，但我認爲有一個「角度的方法」來做到這一點。有人能幫助我嗎？

來源

2016-05-12 Onilol

演示沒有ng-repeathere。

演示與ng-repeathere。

爲什麼你的代碼工作傾斜： 既然你沒有使用你的標記ng-repeat，group在這些地方

<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> 
    <ion-item class="item-accordion" ng-show="isGroupShown(group)">

都undefined。

您需要初始化的group變量toggleGroup(group)，isGroupShown(group)如果在同一scope.Update使用兩次你的HTML應該是不同的名稱：使用ng-repeat

<div class="group" ng-init="groupid1=1"> 
     <ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item> 
     <ion-item class="item-accordion" ng-show="isGroupShown(groupid1)"> 
     <div class="form-group"> 
      <label></label> 
      <input> 
     </div> 
     </ion-item> 
    </div> 
    <div class="group" ng-init="groupid2=2"> 
     <ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item> 
     <ion-item class="item-accordion" ng-show="isGroupShown(groupid2)"> 
     <div class="form-group"> 
      <label></label> 
      <input> 
     </div> 
     </ion-item> 
    </div>

然而，，您可以使用你的HTML包裝像這樣：

<div class="group" ng-repeat="group in groups track by $index"> <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(group)"> <div class="form-group"> <label></label> <input> </div> </ion-item> </div>

它應該工作。

來源

2016-05-12 14:17:27

謝謝！有沒有辦法在控制器部分定義我的組？所以我可以使用'group in groups' – Onilol

您實際上是**正在通過這個語句'$ scope.groups = [{...}，{...}，{...}在控制器部分中定義組。 }]'。 –

我怎麼能取代它呢？抱歉。我對此很感興趣，並且有很多信息讓我感到困惑，而不是幫助。 – Onilol

事實上，所有的羣組都在點擊上展開，這可能是因爲你有（在你的snipet代碼中）兩個使用相同組模型的div。

我談論到您的切換功能給出的組：

ng-click="toggleGroup(group)"

在本教程中，writter採用了NG-重複指令生成自己的div

<div ng-repeat="group in groups">

此行雲在小組中將每個項目分組成一個新的小組模型。這可能是您的手風琴全部擴展的原因（並且可能都有相同的內容）。你能給我們一個更多的公司嗎？

如果你想使用引導手風琴，我可以建議你看看 Angular-ui，一個Angular模塊來代替bootstrap.js並以Angular方式製作相同的東西（使用指令，數據綁定....）。

來源

2016-05-12 13:47:47 FitzChill

回答

相關問題