How to add class in first item into angularjs list - angularjs

Question

I started angularjs http request and I got data successfully as following but when I tried to make first item expanded according bootstrap class "collapse in" instead of "collapse" I didn't find solution.
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;
});
});
HTML
<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>
Would you help me please to find out how to add "in" class in the first item of angularjs list?

Answer 1

The answer you accepted is bad practice, and you might start getting this error in you app: https://docs.angularjs.org/error/$rootScope/infdig don't bind functions to the view when you don't have to.
You can do it simply with ngClass directive (Using the $first indicator that is TRUE for the first element):
<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $first}">
The same can also be done using the $index indicator:
<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $index == 0}">
You might also want to use one-time binding the ensure that angular stop tracking the the in class after the element is bound to the view, so it won't re-add it on each digest cycle (note the :: in the ngClass expression):
<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="::{in: $first}">
Now - You can always use the native uib-collapse for angularjs - Here is an example:
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>
Here i'm creating the panels similar to how you did, but in the ngRepeat loop I added ng-init="Art.isCollapsed = !$first" which initiale the first article to be visible, while the rest are not. Next, instead of using the "regular" bootstrap attributes, I just use the uibCollapse directive: uib-collapse="Art.isCollapsed" which handle everything for you.

Answer 2

You can use ng-class and a function to check if it is the first item as below
$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";
}
for the view change it to
<div data-ng-id="{{Atr.Art_ID}}" ng-class="setClass($index)">