AngularJS:我的手风琴可以扩展，但不会崩溃

Question

我在AngularJS中有一个数据驱动的手风琴对象。这是我的 html 的样子：

.HTML：

 <div class="field-accordion" ng- if="field.fieldAccordion">
  <ul class=a ccordion>
    <li ng-repeat="fieldAccordion in field.fieldAccordion" ng- click="accordion.current = fieldAccordion.fieldName">
      {{ fieldAccordion.fieldName }}
        <ul ng-show="accordion.current == fieldAccordion.fieldName">
          <li ng-repeat="fieldSub in fieldAccordion.fieldSub">
            {{fieldSub.fieldName}}
          </li>
        </ul>
    </li>
  </ul>
</div>

然后在我的JS文件中，我只是像这样使用它：

.JS：

app.controller("myCtrl", function($scope) {
$scope.mySettings({
Header: '',
Title: '',
Img: '',
fieldAccordion: [{
// "this is my accordion list"

这对我来说非常有用。每当我单击父项时，它都会展开。我遇到的问题是我无法让它崩溃。我也在尝试这样做，同时保持一切数据驱动，就像现在一样。我可以在我的 HTML 中更改任何内容以允许文本在展开后折叠吗？

谢谢

Answer 1

所以问题是因为创建了一个新范围，你需要知道的是ng-if and ng-r creates a new scope，我检查了你的代码，ng-repeat是问题的根本原因！ 因此，变量没有更新，手风琴也没有切换。这是使用$parent更新父控制器的简单方法。

我创建了一个突出该问题的模型。因此，与其更新accordion.current将更新ng-if创建的范围，不如将其作为$parent.accordion.current在ng-click中提供，这将更新父范围，并且变量将可用于ng-show并且手风琴切换按预期工作。

下面是一个工作片段，让我知道此修复程序是否解决了您的问题！

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.field = {
    Header: '',
    Title: '',
    Img: '',
    fieldAccordion: [{
      fieldName: "one",
      fieldSub: [{
        fieldName: "oneone"
      }]
    }, {
      fieldName: "two",
      fieldSub: [{
        fieldName: "twotwo"
      }]
    }]
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div class="field-accordion" ng-if="field.fieldAccordion">
    <ul class="accordion">
      <li ng-repeat="fieldAccordion in field.fieldAccordion" ng-click="$parent.accordion.current = fieldAccordion.fieldName">
        {{ fieldAccordion.fieldName }}
        <ul ng-show="accordion.current == fieldAccordion.fieldName">
          <li ng-repeat="fieldSub in fieldAccordion.fieldSub">
            {{fieldSub.fieldName}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>