如何用ng-repeat打开角度ui自举中的第一支手风琴？

Question

有没有选择在ngRepeat的基础上打开第一支手风琴？

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.status = {
    isFirstOpen: true,
    oneAtATime: true
  };
  $scope.cards = [{
    "id": 1,
    "bankid": 999999,
    "type": "VISA",
    "no": "1234 5678 9012 3456",
    "from": "01/06",
    "expiry": "05/18",
    "cvv": 345,
    "name": "Kallayi Basheer Shah"
  }, {
    "id": 2,
    "bankid": 888888,
    "type": "Master",
    "no": "3456 7890 1234 5678",
    "from": "06/12",
    "expiry": "07/16",
    "cvv": 678,
    "name": "Shah Basheer"
  }, {
    "id": 3,
    "bankid": 777777,
    "type": "VISA",
    "no": "9012 3456 1234 5678",
    "from": "03/10",
    "expiry": "08/17",
    "cvv": 123,
    "name": "Basheer Shah Kallayi"
  }];
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
  <div class="row">
    <div class="col-md-12">
      <accordion close-others="status.oneAtATime">
        <accordion-group ng-repeat="card in cards">
          <accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
          <div class="row">
            <div class="col-sm-12">
              Name on card: {{card.name}}
              <br>Card type: {{card.type}}
            </div>
          </div>
        </accordion-group>
      </accordion>
    </div>
  </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>

Answer 1

虽然为模型分配is-open肯定有效,但如果您不打算动态更改行为,您也可以使用它来修复第一个元素

is-open="$first"

Answer 2

是的,angular-ui手风琴具有is-open兼容的属性ng-repeat.

$first如果您的所有<accordion-heading>内容都是静态行为/内容,则使用作品,如@Icycool在其答案中所述.

如果你想在他们的手风琴例子中使用angular-ui使用的变化的V形臂,那么这是行不通的.

为了让第一个项目默认打开并仍然维护雪佛龙(或其他内容)更新,只需给第一个项目自己的手风琴组,范围内的布尔值,并像这样引用第0个索引:

accordionController.js:

$scope.isFirstOpen = true;

accordionExample.html:

<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{cards[0].no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                         isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{cards[0].name}} <br>
        Card Type: {{cards[0].type}}
    </div>
</accordion-group>

然后,类似地创建其余的,给它们自己的开放布尔值,并使用数组的slice()方法来引用所有其余的项目,如下所示:

accordionController.js:

$scope.isOpen = false;

accordionExample.html:

<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{card.no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                                   isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{card.name}} <br>
        Card Type: {{card.type}}
    </div>
</accordion-group>

查看此CodePen演示,了解它的实际应用:http://codepen.io/anon/pen/JdpNgB？edit = 101