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

我是angular的新手，我剛剛創建了一個帶有javascript的動畫手風琴來獲取並顯示一些信息。我決定使用ng-repeat，所以我不必重複編寫代碼。在使用ng-repeat時無法打開或關閉手風琴

但是，無法顯示內容的動畫。爲什麼當我使用ng-repeat時它不起作用？這是否與棱角分明的方式有關？

請幫幫忙，謝謝

這裏是

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

來源

2017-05-19 Thinesh Kumar AL Sivam

你已經調查'NG-click'作爲替代？它可能被認爲是不好的做法，像這樣混合angularjs和原生javascript。 – axlj

當以這種方式使用角，角產生的DOM不填充直到代碼運行之後的示例，這樣你就不會放置DOM元素上的事件偵聽器。您不應該使用查詢選擇器來修改DOM，而應該爲ng-repeated元素添加ng-click指令。

的快捷方式做你想要做看起來是這樣的：

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    "John", 
 
    "Tyrion", 
 
    "Khaleesi", 
 
    ]; 
 
    
 
    $scope.toggleText= function(e) { 
 
    \t var btn = angular.element(e.target); 
 
    var panel = btn.next(); 
 
    
 
    \t 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>

來源

2017-05-19 03:06:40

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

回答

相關問題