如何在AngularJS中獲取ul li值

Question

我想從一個ul元素中獲取li元素的值，位於AangularJS控制器中並希望將它們存儲在一個數組中。

HTML代碼

<ul id="list" my-directive> 
     <li>A</li> 
     <li>B</li> 
     <li>C</li> 
     <li>D</li> 
     <li>E</li> 
    </ul> 

控制器

app.controller('myCtrl', function($scope) { 
    $scope.newList = []; 
    $scope.newList = $('#list li').html(); 
}) 

什麼，我做錯了什麼？

Answer 1

爲什麼不用ng-repeat只渲染所有li元素？

<ul id="list"> 
    <li ng-repeat="alphabet in alphabets">A</li> 
</ul> 

代碼

$scope.alphabets = ["A", "B", "C", "D", "E"] 

---

可能是你，你已經從服務器端使用的視圖引擎的渲染數據的一些特殊情況。雖然下面是一個使用指令來完成的方式（還是我建議你使用的第一個建議的方式只）

標記

{{myList}} 
<ul my-directive="myList"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
</ul> 

指令

.directive('myDirective', function() { 
    return { 
    link: function(scope, element, attrs) { 
     var list = scope[attrs.myDirective] = [] 
     Array.from(element.find('li')).forEach(function(li) { 
     list.push(li.innerText) 
     }); 
    } 
    } 
}) 

Demo