Question

我启动了angularjs http请求并且我成功获得了数据，但是当我尝试根据bootstrap类“崩溃”而不是“崩溃”扩展第一个项目时，我没有找到解决方案。

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>

请您帮我找一下如何在angularjs列表的第一项中添加“in”类？

Answer 1

您接受的答案是不好的做法，您可能会在app中开始收到此错误：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类，因此它不会在每个摘要周期中重新添加它（请注意::表达式中的ngClass）：

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

现在 - 您可以随时使用本地uib-collapse for angularjs - 以下是一个示例：

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>

这里我创建的面板与您的方式类似，但在ngRepeat循环中我添加了ng-init="Art.isCollapsed = !$first"，其中首先显示的是第一篇文章，而其余的则不是。接下来，我只使用uibCollapse指令：uib-collapse="Art.isCollapsed"代替使用“常规”引导属性，它为您处理所有事情。

Answer 2

您可以使用ng-class和函数来检查它是否是第一项，如下所示

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

如何将第一项中的类添加到angularjs列表中

2 个答案: