anglejsリストに最初の項目のクラスを追加するには

Question

私はangularjs httpリクエストを開始しました。次のようにデータを取得できました。しかし、最初の項目を "collapse in"の代わりに "collapse in"解決策を見つける。

Angularjs

var app = angular.module('myApp', []); 
    app.controller('myCtrl2', function ($scope, $http) { 
     $http.get('../C_Angular.asmx/ShowArticle') 
     .then(function (response) { 
      $scope.Articles = response.data; 
     }); 
    }); 

<div class="panel-group" data-ng-repeat="Art in Articles" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" data-ng-href="{{Atr.Art_ID}}"> 
         {{Art.Art_Title}} 
        </a> 
       </h4> 
      </div> 
      <div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse"> <%-- my prolblem here is 
how to put a class "panel-collapse collapse in" to the first item in the list 
instead of "panel-collapse collapse" --%> 

       <img data-ng-src="{{Art.Art_Pic}}" style="margin: 20px; border: 4px solid #FFFFFF; 
       width: 140px; height: 100px; float: left;" /> 
       <div class="panel-body" style="padding: 5px; margin: 5px; text-align: right; background-image: url('../App_Pic/bg03.jpg');"> 
         {{Art.Art_Body}} 
       </div> 
       <button type="button" class="btn btn-primary btn-sm " style="margin-bottom: 10px">Read More ...</button> 
      </div> 
     </div> 
    </div> 

HTMLは、あなたは私がangularjsリストの最初の項目にクラス "に" を追加する方法を見つけるために助けてくださいますか？

Answer 1

に変更してチェックするためにNG-クラスや関数を使用することができますこのエラーが発生する可能性があります。https://docs.angularjs.org/error/$rootScope/infdigビューに関数をバインドしないでください。

あなたは単に ngClassディレクティブ（最初の要素に対してTRUEです $firstインジケータを使用）でそれを行うことができます

：

<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $first}"> 

同じまた$indexインジケータ使用して行うことができます。

<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $index == 0}"> 

を

one-time bindingを使用して、要素がビューにバインドされた後にinクラスを追跡する角度停止を確実にすることもできます。そのため、各ダイジェストサイクルで要素を再追加しません（no TE ::）ngClass式で：私はここで

angular.module('app', ['ngAnimate','ui.bootstrap']).controller('ctrl', function ($scope) { 
 

 
    $scope.Articles = [ 
 
    {id: 1, title: 'Interesting article #1', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 
 
    {id: 2, title: 'Interesting article #2', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 
 
    {id: 3, title: 'Interesting article #3', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}]; 
 
    
 
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-animate.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div class="panel-group" data-ng-repeat="Art in Articles" ng-init="Art.isCollapsed = !$first"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-ng-href="{{Atr.id}}" ng-click="Art.isCollapsed = !Art.isCollapsed">{{Art.title}}</a> 
 
     </h4> 
 
     </div> 
 
     <div data-ng-id="{{Atr.id}}" class="panel-collapse collapse" uib-collapse="Art.isCollapsed"> 
 
     <div class="panel-body">{{Art.body}}</div> 
 
     <button type="button" class="btn btn-primary btn-sm" >Read More ...</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

：今

<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="::{in: $first}"> 

- - あなたは常にangularjsのネイティブuib-collapseを使用することができますがここでは一例ですあなたのやり方に似たパネルを作成しますが、ngRepeatループでは、最初の記事を最初に表示するng-init="Art.isCollapsed = !$first"を追加しました。一方、rエストではありません。次に、「通常の」ブートストラップ属性を使用する代わりに、私はただuibCollapseという指示文（uib-collapse="Art.isCollapsed"）を使用してすべてを処理します。

Answer 2

あなたは受け入れ答えは悪い習慣である、それはビューのよう

$scope.setClass = function(index){ 
    //return collapse in if it is the first item 
    if(index == 0) return "panel-collapse collapse in"; 
    //or return collapse in 
    return "panel-collapse collapse"; 
} 

を下回る最初の項目である場合

<div data-ng-id="{{Atr.Art_ID}}" ng-class="setClass($index)">