Question

我有一些折叠/展开的div，它使第一个div始终在加载时保持打开状态。在这里，我需要保持第一个div保持打开状态，并且在更改给定的下拉列表时也能正常工作，但是如果我扩展任何人并更改下拉列表，则扩展的div我仍然尝试使用$ scope.groups [0] .isOpen = true;。但它不起作用。有人可以在下面的代码中帮助我吗？

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>

<body ng-app="app">
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div">
      <div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | orderBy:predicate:reverse track by $index">
        <div class="parents" ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
        </div>

        <ul class="childs" ng-show="($index == 0 && pristine) || group.isOpen">
          <li ng-repeat="item in group.list ">
            <span ng-bind-html="item"></span>
          </li>
        </ul>
      </div>
    </div>
    <button type="button" ng-click="test()">Sort</button>
    <select ng-model="x" ng-change="changeit()">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    </select>

  </div>
</body>

script.js

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
  $scope.oneAtATime = true;
    $scope.pristine = true;
  $scope.open = function (item) {
    $scope.groups.filter(a=> a ===item).forEach(a=>{
      a.isOpen = !a.isOpen;
    });
    $scope.closeOthers(item);
    $scope.pristine = false;
  }

  $scope.closeOthers = function (item) {
    $scope.groups.filter(a=> a !==item).forEach(a=>{
      a.isOpen = false;
    });
  }

  $scope.groups = [
    {
      title: 'title 1',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 2',
      id:'2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 3',
      id:'3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 4',
      id:'4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]

    },
    {
      title: 'title 5',
      id:'6',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 6',
      id:'5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    }
  ];
  $scope.test = function() {
$scope.groups.forEach(a => {a.isOpen = false;});
    $scope.pristine = true;

    $scope.predicate = 'id';
    $scope.reverse = !$scope.reverse;       
  }
 $scope.changeit = function() {

     $scope.groups[0].isOpen = true;

 }
});

Answer 1

以下是我认为您想要的行为的工作笔：https://codepen.io/Lahikainen/pen/rPBVeO

这是经过一些更改的代码：

编辑：添加了组的切换行为

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>

<body ng-app="app">
  <div ng-controller="AccordionDemoCtrl">
    <div class="scroll-div">
      <div
        style="border:1px solid;"
        id="anchor{{group.id}}"
        ng-repeat="group in groups track by group.id">

        <div class="parents" ng-click="toggleExpand(group)">
          <i ng-class="{
            'glyphicon-minus': isExpandedGroup(group),
            'glyphicon-plus': !isExpandedGroup(group)}">
          </i>
          {{ group.title }}
        </div>

        <ul class="childs" ng-show="isExpandedGroup(group)">
          <li ng-repeat="item in group.list ">
            <span ng-bind-html="item"></span>
          </li>
        </ul>

      </div>
    </div>
    <button type="button" ng-click="sort()">Sort</button>
    <select ng-model="selectedGroup" ng-options="group.title for group in groups">
      <option>{{ group.title }}</option>
    </select>

  </div>
</body>

控制器

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
  $scope.groups = [
    {
      title: 'title 1',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 2',
      id:'2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 3',
      id:'3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 4',
      id:'4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]

    },
    {
      title: 'title 5',
      id:'6',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 6',
      id:'5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    }
  ];

  $scope.selectedGroup = $scope.groups[0];
  $scope.sortOrderMultiplier = 1;

  $scope.isExpandedGroup = function (group) {
    return group === $scope.selectedGroup;
  }

  $scope.toggleExpand = function (group) {
    if ($scope.selectedGroup === group) {
      $scope.selectedGroup = undefined;
    } else {
      $scope.selectedGroup = group; 
    }
  }

  $scope.sort = function () {
    $scope.sortOrderMultiplier *= -1;

    $scope.groups.sort(function (a, b) {
      if (a.id > b.id) {
        return 1 * $scope.sortOrderMultiplier;
      }
      if (a.id < b.id) {
        return -1 * $scope.sortOrderMultiplier;
      }
      return 0;
    })
  }
});

如果有任何不清楚的地方，随时问问题。

编辑，添加关于我重构您代码的理由：

您的要求之一似乎是一次只能扩展一组。因此，我向模型添加了selectedGroup，而不是向每个组添加了isOpen属性。

当您只需要一个selectedGroup模型时，此代码就变得不必要了： ng-show="($index == 0 && pristine) || group.isOpen"

您的open函数接收一个组作为其参数。然后，您过滤groups数组以找到对您已有引用的组的引用。然后，您设置isOpen属性。该功能所需要做的就是item.isOpen = !item.isOpen;，这与您的closeOthers功能一样。

如何在angularjs的下拉列表中始终保持可折叠div的第一个div的扩展

HTML

script.js

1 个答案: