我有以下 HTML:
<div class="custom-select">
<div class="custom-select-placeholder">
<span id="placeholder-pages">Show all posts</span>
</div>
<ul class="custom-select-list animate-show no-padding no-margin" >
<li ng-click="selectItem($event)">Show all posts</li>
<li ng-click="selectItem($event)">Events</li>
<li ng-click="selectItem($event)">Files</li>
<li ng-click="selectItem($event)">Pictures</li>
<li ng-click="selectItem($event)">Thoughts</li>
</ul>
</div>
当我点击“li”项时,我需要获取其innerHTML,并将id为“placeholder-pages”的span的innerHTML设置为获取的值。
为此,我在 Controller 中编写了以下函数:
$scope.selectItem = function(evt) {
var selected = evt.target.innerHTML; //working
var placeholder = document.getElementById('placeholder-pages'); //working
placeholder.innerHTML = selected; //not working
}
在该函数中,我可以获得所选“li”的innerHTML 以及“placeholder-pages”div。但我无法设置 div 的innerHTML。我没有收到任何错误。什么也没发生。
最佳答案
我通过使用ng-bind解决了这个问题。
HTML:
<div class="custom-select-placeholder">
<span id="placeholder-pages" ng-bind="selected_option"></span> //set html using ng-bind
</div>
Controller :
$scope.selected_option = 'Show all posts';
$scope.selectItem = function(evt) {
var selected = evt.target.innerHTML;
$scope.selected_option = selected;
}
我想这是@Simon 建议的一种更“Angular ”的做事方式。
关于javascript - AngularJS:ng-click后无法设置元素的innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32988422/