如何在angular ui bootstrap中用ng repeat打开第一个手风琴

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="$first"

Answer 2

是的，angular ui手风琴具有与ng-repeat兼容的is-open属性。

如果你的<accordion-heading>中只有静态行为/内容，那么使用$first是有效的，就像@Icycool在他们的答案中所说的那样。

然而，如果你想在手风琴的例子中使用不断变化的V形角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?editors=101

Answer 3

在模板中，绑定手风琴的is-open属性，如下所示：

<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">

在控制器中：$scope.status = { isItemOpen: [true] };

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.status = {
    isFirstOpen: true,
    oneAtATime: true,
    isItemOpen: [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" is-open="status.isItemOpen[$index]">
          <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>