Extract data from existing HTML with Angular.js

Question

Extract data from existing HTML with Angular.js

angular.js is great for complex client side JavaScript based web applications, but I also thinking about to use it for smaller simple JavaScript tasks.

For example I have a list with some items:

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

Now I want to add some buttons to the HTML which should filter and/or sort the list after some user input, which should be an easy task.

Is there any way to extract the data from existing HTML elements to use them with angular.js? The data need to be in the HTML, so search engine could also get a hold of whats

Edit for clarity:

The end result would be that the data from the ul list will be pushed into a model of the controller that handling the list. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
If I push more objects into the model, the list should display them.
If I apply a filter to the model it should filter the li elements.

Best case scenario would be something similar to this:

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

javascript
angularjs

Answer 1

Okay. Apparently there is no way to this in a default Angular.js application.

Answer 2

If I am understanding the question correctly, you could just use the angular.element().scope for the html element in question.

I use this method for certain interaction that can't be handled directly out of the box with angular.

Answer 3

I ran into the same problem in a project I'm working on. My solution was to add the data from the html to a variable in my angular controller and then hide the initial html. This method keeps the original list in the html for SEO, old browsers and users without javascript. It replaces this list with an angular generated one for other users.

A working example using your code is pasted below or you can see it at this link.

I'm aware this is an old question so my answer might not be of help to the initial poster. My solution is aimed at anyone else who runs into the same problem we did.

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