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

发布时间：2020-12-17 18:01:39 所属栏目：安全来源：网络整理

导读：有没有选择在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

有没有选择在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,"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>

解决方法

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

is-open="$first"

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!