父作用域更新子作用域

Question

我找到了很多从子作用域更新父作用域变量的方法，也就是 The Dot，但对我来说没有帮助。

我有 ui-bootstrap 手风琴，它根据我从后端传递给它的 isOpen 变量打开和折叠。

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
  $scope.currentPage = 1;
  $scope.items = [{
    label: 'Item 1',
    open: true
  }, {
    label: 'Item 2',
    open: true
  }, {
    label: 'Item 3',
    open: true
  }];

  $scope.opened = false;
}

<accordion id="accordion_main">
  <accordion-group ng-repeat="item in items" heading="{{item.label}}" is-open="item.open">
  </accordion-group>
</accordion>
<span class="btn btn-default" id="toggle_all" ng-click="m.open=!m.open">Collapse All</span>

我想制作一个全部折叠的按钮，它不在 ng-repeat 的范围内。如果有更好的制作折叠全部按钮的方法请指教，

Answer 1

您可以在范围内使用另一个变量，例如：

$scope.collapse_all = false;

并在页面

<accordion id="accordion_main">
  <accordion-group ng-repeat="item in items" heading="{{item.label}}" is-open="!collapse_all && item.open">
  </accordion-group>
</accordion>
<span class="btn btn-default" id="toggle_all" ng-click="collapse_all=!collapse_all">Collapse All</span>

Answer 2

更改您的 ngClick 以循环遍历您的项目并将它们设置为 false。

<span class="btn btn-default" id="toggle_all" ng-click="collapseAll()">Collapse All</span>

JS:

$scope.collapseAll = function(){
    for(var x = 0; x < $scope.items.length; x++){
        $scope.items[x].open = false;
    }
};

父作用域更新子作用域

Parent scope update child scope

angularjs

angular-ui

angularjs-scope

angularjs-ng-repeat