6

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>
4

3 回答 3

0

好的。显然，在默认的 Angular.js 应用程序中没有办法做到这一点。

于 2013-04-13T17:24:23.703 回答
0

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

下面粘贴了一个使用您的代码的工作示例，或者您可以在此链接中查看它。

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

<!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>
于 2014-01-27T15:48:08.700 回答
0

如果我正确理解了这个问题，您可以将 angular.element().scope 用于有问题的 html 元素。

我将这种方法用于某些无法直接使用 angular 开箱即用处理的交互。

于 2014-11-05T09:05:24.090 回答