Question

angular.js非常适合基于JavaScript的复杂客户端Web应用程序，但我也考虑将其用于较小的简单JavaScript任务。

例如，我有一个包含一些项目的列表：

<ul>
    <li data-id="1">Foo</li>
    <li data-id="2">Bar</li>
</ul>

现在我想在HTML上添加一些按钮，这些按钮应该在用户输入之后对列表进行过滤和/或排序，这应该是一项简单的任务。

有没有办法从现有的HTML元素中提取数据，以便将它们与angular.js一起使用？数据需要在HTML中，因此搜索引擎也可以掌握什么

为清晰起见，

修改：

最终结果是来自ul列表的数据将被推送到处理列表的控制器的模型中。（[{id:1, text:"Foo"}, {id:2, text:"Bar"}]）
如果我将更多对象推入模型，列表应显示它们如果我将过滤器应用于模型，则应过滤li元素。

最佳案例场景与此类似：

<div ng-model="data">
    <ul ng-repeat="object in data | filter:filterCriteria">
        <li data-id="1">Foo</li>
        <li data-id="2">Bar</li>
        <li data-id="{{object.id}}">{{object.text}}</li>
    </ul>
</div>

Answer 1

好。显然，在默认的Angular.js应用程序中无法实现此目的。

Answer 2

我在一个正在研究的项目中遇到了同样的问题。我的解决方案是将html中的数据添加到角度控制器中的变量中，然后隐藏最初的html。这种方法将原始列表保存在SEO，旧浏览器和没有javascript的用户的html中。它使用为其他用户生成的角度替换此列表。

使用您的代码的工作示例粘贴在下面，或者您可以在this link看到它。

我知道这是一个老问题，所以我的回答可能对初始海报没有帮助。我的解决方案针对遇到同样问题的其他任何人。

<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app">
  <head>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script>
      function Ctrl($scope) {
        $scope.objects = [];
        $scope.init = function(){
          $("ul.data").hide();
          $("ul.data li").each(function(){
            var $this = $(this);
            var newObject = {
              name: $this.html(),
              id: $this.attr("data-id")
            };
            $scope.objects.push(newObject);
          });
        };
      }
    </script>
  </head>
  <body>
    <div ng-app>
      <div ng-controller="Ctrl" ng-init="init()">
        <ul>
        <li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li>
        </ul>
        <ul class="data">
            <li data-id="1">Foo</li>
            <li data-id="2">Bar</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Answer 3

如果我正确理解了这个问题，你可以使用有问题的html元素的angular.element（）。scope。

我使用此方法进行某些无法直接使用angular进行处理的交互。

使用Angular.js从现有HTML中提取数据

3 个答案: