選択グループ

Question

私はちょうど角を開始し、私はこのようなHTMLで自分のデータを使用しようとしているcodepen Accordion List

からのコードサンプルを得た：

<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を渡しますが、それを行うための「角度のある方法」があると思います。誰か助けてくれますか？

Answer 1

デモng-repeathereなし。

デモng-repeathereとなります。

なぜあなたのコードのカントの仕事： あなたは

<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)"> 

これらの場所にgroup、あなたのマークアップでng-repeatを使用していないので、両方undefinedです。あなたが必要とする

は、toggleGroup(group)ためgroup変数を初期化isGroupShown(group)と同じscope.Updateで二回あなたのhtmlを使用した場合、別の名前でなければなりません：

<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> 

しかし、することで使用できるng-repeatを使用して、あなたの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> 

これは動作するはずです。

Answer 2

同じグループモデルを使用する2つのdivが（あなたのコードのスニペット内に）存在するため、すべてのグループがクリックで拡大するということでしょう。私はあなたのトグル関数に与えられたグループについて話しています

：チュートリアルで

ng-click="toggleGroup(group)" 

、writterは、この行が行く

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

彼のdivを生成するために、NG-繰り返しディレクティブを使用していますグループ内の各項目を新しいグループモデルにします。これは、あなたのアコーデオンがすべて拡大している（そしておそらく、それらのすべてが同じ内容である）理由かもしれません。

ブートストラップアコーディオンを使用する場合は、 Angular-uiをご覧になることをお勧めします。角度モジュールは、bootstrap.jsを置き換えて同じものを角度のある方法で作成します（ディレクティブ、データバインディング....）。