Question

我想从AangularJS控制器中的ul元素中获取li元素的值，并希望将它们存储在数组中。

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

为什么不首先使用li呈现所有ng-repeat元素？

<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

如何在AngularJS中获取ul li值

1 个答案: