在角度 ui 引导程序中控制 isOpen答案

【问题标题】：controlling isOpen in angular ui bootstrap在角度 ui 引导程序中控制 isOpen
【发布时间】：2015-12-09 23:38:41
【问题描述】：

我想在 angualr ui 引导手风琴指令中使用 isOpen 属性，这样它就会打开手风琴中第一个 ng-repeat 的第一个元素。我尝试了一些没有运气的事情。有人可以就此提出建议吗？

    //html
          <div ng-show="accordionCtrl.isNotString(value);" class="accordionContainer" ng-repeat="(key, value) in accordionCtrl.lessons">
      <div class="accordionStepBox">
        <h4 class="accordionStepTitle">Step {{$index+1}}: {{value.title}}</h4>
        <span>Summary: {{value.summary}}</span>
      </div>
      <div class="accordionCoursesBox">
        <div class="accordionCoursesText">Courses</div>

        <!-- accordion for suffles -->
        <uib-accordion close-others="accordionCtrl.oneAtATime">
          <!-- only give accordion to object vals -->
          <div class="accordion" ng-show="accordionCtrl.isNotString(value);" ng-repeat="(key, value) in value">
            <!-- <uib-accordion-group heading="{{value.title}}" is-open="accordionCtrl.firstIndex($index)"> -->
            <uib-accordion-group heading="{{value.title}}">
              <div ng-repeat="(key, value) in value">
                <div ng-show="accordionCtrl.isNotString(value);" class="accordionSuffleBox">
                  {{$index+1}}. {{value.title}} 
                </div>
              </div>
              <br/>
              <button ui-sref="lesson" class="btn btn-default accordionbutton">Start</button>
            </uib-accordion-group>
          </div>
        </uib-accordion>
      </div>
    </div>

    //controller
    angular
    .module('neuralquestApp')
    .controller('AccordionCtrl', AccordionCtrl);


  function AccordionCtrl(FirebaseUrl, $firebaseObject, $firebaseArray) {
    var accordionCtrl = this;
    var getLessons = getLessons;

    accordionCtrl.oneAtATime = true;

    accordionCtrl.init = init;
    accordionCtrl.init();
    accordionCtrl.isNotString = isNotString;
    accordionCtrl.firstIndex = firstIndex;

    /*======================================
    =            IMPLEMENTATION            =
    ======================================*/

    function init() {
      getLessons();
    }

    function firstIndex(index) {
      if(index === 0){
        return true;
      } else {
        return false;
      }
    }

    function getLessons() {
      var ref = new Firebase(FirebaseUrl);
      accordionCtrl.lessons = $firebaseObject(ref.child('NeuralNetwork'));
    }

    function isNotString(val) {
      // console.log('val', val);
      if(typeof val === "string"){
        console.log('is string', val);
        return false;
      } else {
        return true;
      }
    }

  }

【问题讨论】：

您的 HTML 看起来无效。具体来说，您缺少带有 ng-repeat 的第一个 <div> 的结束标记。另外，请确保编写像这样的自动关闭标签：<br/>.
哦。代码已更新。
看起来还是不对。带有is-open 属性的<uib-accordion-group> 被注释掉。此外，为不同的事物重复使用相同的变量名称（key、value）是非常糟糕的做法，并且名称也应该是描述性的。您很容易对使用的是哪个key 或value 感到困惑。
感谢您的意见。我正在玩 is-open 属性，但效果不佳。所以我有多个 uib-accordion-group。我同意不使用相同的键、值，我会改变它。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

is-open 属性设置为与控制器进行 2 路绑定，因此您可以执行以下操作：

<div ng-controller="AccordionDemoCtrl">
  <uib-accordion>
    <div ng-repeat="group in groups">
      <uib-accordion-group heading="{{group.title}}" is-open="openIndex[$index]">
        {{group.content}}
      </uib-accordion-group>
    </div>
  </uib-accordion>
</div>

angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.openIndex = [true];

  $scope.groups = [
    {
      title: 'Group Header - 1',
      content: 'Group Body - 1'
    },
    {
      title: 'Group Header - 2',
      content: 'Group Body - 2'
    },
    {
      title: 'Group Header - 3',
      content: 'Group Body - 3'
    },
    {
      title: 'Group Header - 4',
      content: 'Group Body - 4'
    }
  ];
});

例如plunk。此外，close-others 属性的默认值为 true，因此您无需将其显式设置为 true。

【讨论】：