如何在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