Angularjs - ngのリピート

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-hide="showCompAcc" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

これはdata.Currentlyそれはすべてのタブを示すNG・リピートとアコーディオンの抜粋であるにアコーディオンのデフォルトの最初のタブで表示する方法。私が欲しいのは、デフォルトでは最初のタブのみを表示し、他のタブをクリックすると他のタブの詳細を表示し、デフォルトのタブの詳細を隠すはずです。

出典

2017-01-31 Mohammed

それをチェックアウト{ 'NG-隠す'：$インデックス> 0}' - それは、各タブに 'NG-hide'クラスを追加します最初のものではない（インデックス== 0） - ng-class = :: {'ng-hide'：$ index} '（簡略版） –

スニペットを提供できるなら、それは素晴らしいことだ。私は上記の作業スニペットを付けました。 @AlonEitan – Mohammed

私は完全な例を追加しました –

あなたは

Angular ui accordion

$scope.groups = [ 
    { 
     "Name" : "Alfreds Futterkiste", 
     "Country" : "Germany", 
     "open" : true 
    }, 
    { 
     "Name" : "Berglunds snabbköp", 
     "Country" : "Sweden", 
     "open": false 
    }, 
    { 
     "Name" : "Centro comercial Moctezuma", 
     "Country" : "Mexico", 
     "open" : false 
    }, 
    { 
     "Name" : "Ernst Handel", 
     "Country" : "Austria", 
     "open" : false 
    } 
    ]

HTML

<uib-accordion close-others="true"> 
    <div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open"> 

    {{group.Country}} 
    </div> 
    </uib-accordion>

ここ

このためplunkerブートストラップの角度UIが提供するUIB-アコーディオンを使用することができます。 Plunker

あなたは `NG-クラス= ::追加することができます

出典

2017-01-31 14:34:29

このエラーを示しているのは、https://docs.angularjs.org/error/$injector/unpr?p0=$$isDocumentHiddenProvider%20%3C-%20$$isDocumentHidden%20%3C-%20$$animateQueue%20 ％3C-％20 $アニメート％20％3C-％20 $コンパイル％20％3C-％20 $$ animateQueue。 @nishantagarwal – Mohammed

@モハメッドプランナーでうまくいきます。それは、アニメートの依存関係を解決できないようです。このエラーは、プランナーまたはコード内にありますか？ –

デフォルトの最初のタブが開いていることを除いて、正常に動作します。 @nishantagarwal – Mohammed

ng-class=::{'ng-hide': $index > 0}を各タグの本文に追加できます。

それは最初の（インデックス== 0）でない各タブ本体に（つまり、基本的にCSS display: none;である）ng-hideクラスが追加されます - あなたはまた、ng-class=::{'ng-hide': $index}（速記版）を行うことができます。

さらに、showCompAccフラグをクリックすると、各タブに対して正しく設定されるng-init="showCompAcc = $index > 0"が追加されました。

::は、テンプレートレンダリングと同様にクラスを設定し、ダイジェストサイクルごとにクラスをリセットしないことを保証するための1回限りのバインドです。

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records" > 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-hide="showCompAcc" ng-init="showCompAcc = $index > 0" ng-class="::{'ng-hide': $index}" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

あなたは、他のタブをクリックすると、現在開いているタブを非表示にする場合は、次の操作を行うことができます

ここ

var app = angular.module("myApp2", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.active = {record: 0}; 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp2" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="active.record = $index">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-if="active.record == $index" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

私が追加コントローラのフラグ

$scope.active = { 
    record: 0 
};

recordsの配列のデフォルトのタブインデックスを保持していますが、クリックしたタブでng-click="active.record = $index"に更新しています。次に、ng-if="active.record == $index"を使用してアクティブなタブ本体を表示します。

出典

2017-01-31 13:37:13

これはありがたいですが、これはうまくいきません。他のタブをクリックすると他のタブの詳細が表示され、デフォルトのタブの詳細やタブが隠されます。 @AlonEitan – Mohammed

@モハメッド何がうまくいかない？教えてください私の答えを編集します –

私はただコメントします。@AlonEitan – Mohammed

Angularjs - ngのリピート

答えて

関連する問題