javascript - AngularJS Accordion is-open 检查与 ng 重复

标签 javascript angularjs accordion angular-ui-bootstrap

我可以在没有 ng-repeat 的情况下使它工作,但是当我有元素列表时,is-Open 不起作用。
1.我应该可以一次打开一个面板(有时会打开所有面板)
2. is-Open 应该在面板打开时得到值 true
3. 如果用户在打开面板后点击面板内容列表,我应该能够获取值(类似于面板上的 is-Open )。

html

<body ng-app="myApp">
        <div class="col-sm-6" ng-controller="Controller">
            <div class="column-nav">
                <uib-accordion close-others="oneAtATime">
                    <uib-accordion-group  ng-repeat="group in groups" ng-scroll="group in groups" is-open="$parent.isOpen">
                        <uib-accordion-heading ng-model="checkTitle">
                            {{group.title}}
                        </uib-accordion-heading>
                            <a>{{group.content}}</a>
                    </uib-accordion-group>
                </uib-accordion>
            </div>
            <div>
                Panel Header Open: {{isOpen}} <br>
                Panel oneAtATime: {{oneAtATime}}
            </div>
        </div>  
    </body>

应用程序.js

myApp.controller('Controller', ['$scope', function($scope) {

    $scope.isOpen = false;
    $scope.oneAtATime = true;

    // Data 
     $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Content - 1"
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
    }
  ];

  //log
  $scope.$watch('isOpen', function(){
        console.log(" watch isOpen:" +$scope.isOpen);
   }, true);

  }]);

Plunker

感谢您的帮助和建议。

最佳答案

这只是其他答案的细微变化。 (我仍然不确定你的第三个要求,或者至少你的意思是什么。)

我们改变这个:

...is-open="$parent.isOpen">

进入这个(不需要改变任何数据):

...is-open="group.isOpen" ng-click="updateOpenStatus()">

并将函数添加到 Controller 中,以设置“全局”打开状态。 (要求二)

$scope.updateOpenStatus = function(){
  $scope.isOpen = $scope.groups.some(function(item){
    return item.isOpen;
  });
}

http://plnkr.co/edit/xMgmLiL65BBimUJ7wbVE?p=preview

关于javascript - AngularJS Accordion is-open 检查与 ng 重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36070826/

相关文章:

javascript - HTML5音频永久循环通过不同的来源

javascript - 在 JavaScript 中,为什么 []==false 为 true?

angularjs - Grails Asset-pipeline 不加载 Angular 部分模板

javascript - 在 AngularJS 中中止 AJAX 请求

apache-flex - Flex 组件就像一个多选 Accordion ?

javascript - 如何仅按水平顺序从表格中选择多个单元格?

javascript - Noobie Jquery 问题 - 为什么这个简单的脚本不起作用?

javascript - 在 AngularJS 中的多个项目之间共享代码

protractor by.repeater 和visibilityOf 仅返回集合中的第一项

javascript - 我想使用 ng-if 跳过 ng-repeat 中的项目