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>

AngularJS：我的手风琴扩展，但不会崩溃

1 个答案: