使用ng-repeat時無法打開或關閉手風琴

Question

我是angular的新手，我剛剛用JavaScript創建了一個動畫手風琴，以獲取並顯示一些信息。 我決定使用ng-repeat，因此不必重復編寫代碼。

但是，手風琴未能動畫顯示內容。 為什么當我使用ng-repeat時它不起作用？ 與角度工作方式有關嗎？

請幫忙，謝謝

這是一個例子

https://fiddle.jshell.net/ppw2fag9/1/

Answer 1

以這種方式使用Angular時，直到代碼運行之后才會填充Angular生成的DOM，因此您不會在ng-repeat DOM元素上放置事件偵聽器。 您不應使用查詢選擇器來修改DOM，而應將ng-click指令添加到ng-repeated元素中。

做您想做的事的快速方法如下所示：

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ "John", "Tyrion", "Khaleesi", ]; $scope.toggleText= function(e) { var btn = angular.element(e.target); var panel = btn.next(); btn.toggleClass("active"); if (panel.css('maxHeight')){ panel.css('maxHeight', null); } else { panel.css('maxHeight', panel.prop('scrollHeight') + 'px'); } } });

 button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <h2>With ng-repeat</h2> <div ng-repeat="y in records"> <button class="accordion" ng-click="toggleText($event)">{{y}}</button> <div class="panel"> <p>Some explaination...bla bla blah</p> </div>

使用ng-repeat時無法打開或關閉手風琴

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-19 03:06:40

使用ng-repeat時無法打開或關閉手風琴

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-19 03:06:40

解決方案1
0 已采納 2017-05-19 03:06:40