如何用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手风琴具有与$first兼容的<accordion-heading>属性。

如果$scope.isFirstOpen = true;中的所有内容都是静态行为/内容，则使用<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> 可以正常工作，因为@Icycool会在答案中说明。

如果您想在accordion example中使用角度ui使用的变化的V形纹，那么这将不起作用。

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

<强> accordionController.js：

slice()

<强> accordionExample.html：

$scope.isOpen = false;

然后，类似地创建其余部分，给它们自己的开放布尔值，并使用数组的<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> 方法来引用所有其他项目，如下所示：

<强> accordionController.js：

th, td { white-space: nowrap; } td span { white-space: normal; }

<强> accordionExample.html：

<div class="row" style=" margin-right: 15px; margin-left: 15px;">
  <div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
    <div id="piechart"></div>
  </div>
  <div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
    <table class="table table-bordered piechart-key ">
      <thead>
        <th colspan="2"></th>
        <th>Item Summary</th>
        <th>Item List</th>
      </thead>
      <tbody>
        <tr>
          <td width="22"></td>
          <td width="70">Incorrect</td>
          <td width="55"><span id="pc-danger"></span>/50</td>
          <td width="100"><span id="pc-danger-list"></span>
          </td>
        </tr>
        <tr>
          <td width="22"></td>
          <td width="120">Partially Correct</td>
          <td width="55"><span id="pc-warning"></span>/50</td>
          <td width="100"><span id="pc-warning-list"></span>
          </td>
        </tr>
        <tr>
          <td width="22"></td>
          <td width="70">Correct</td>
          <td width="55"><span id="pc-success"></span>/50</td>
          <td width="100"><span id="pc-success-list">Item-inside Item-inside Item-inside</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

查看此 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] };

＆＃13;

＆＃13;

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"
  }];
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;