angular.js отлично подходит для сложных клиентских веб-приложений на основе JavaScript, но я также подумал об использовании его для небольших простых задач 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>
6
TheHippo 23 Янв 2013 в 16:24

3 ответа

Лучший ответ

Ладно. Видимо, нет способа сделать это в приложении Angular.js по умолчанию.

0
TheHippo 13 Апр 2013 в 17:24

Если я правильно понимаю вопрос, вы можете просто использовать angular.element (). Scope для рассматриваемого html-элемента.

Я использую этот метод для определенного взаимодействия, которое не может быть обработано прямо из коробки с угловым.

0
Michael Tempest 5 Ноя 2014 в 09:05

Я столкнулся с той же проблемой в проекте, над которым я работаю. Моим решением было добавить данные из 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>
0
John_C 27 Янв 2014 в 15:48