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更新父控制器的簡單方法。

我創建了一個突出問題的模型。 因此， ng-if您可以在ng-click中將其$parent.accordion.current為$parent.accordion.current ，則無需更新accordion.current更新ng-if創建的作用域，這將更新父作用域，並且該變量可用於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>