A Pen by Joe Watkins.

Angular---Grab-data-from-dom.markdown

Angular - Grab data from dom

A Pen by Joe Watkins on CodePen.

License.

index.html

<div ng-app="myApp">
  <div ng-controller="PizzaCtrl">
    <label for="search">Search</label>
    <input type="text" id="search" ng-model="searchText">
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Rating</th>
          <th>Vegetarian?</th>
        </tr>
      </thead>
      <tr ng-repeat="pizzas in pizzas.types | filter:searchText">
        <td>{{pizzas.name}}</td>
        <td>{{pizzas.rating}}</td>
        <td>{{pizzas.vegetarian}}</td>
      </tr>
    </table>
  </div>
</div>


<div class="pizza-data">
  <ul>
    <li data-name="Meat Lovers" data-rating="95" data-vegetarian="No"></li>
    <li data-name="Vegetarian" data-rating="100" data-vegetarian="Yes"></li>
    <li data-name="Greek" data-rating="75" data-vegetarian="Yes"></li>
  </ul>
</div>

script.js

var myApp = angular.module('myApp', []),
    $pizzaData = $('.pizza-data'),
    Pizzas = [];

    // grab data from dom
    $pizzaData.find("li").each(function(){
      Pizzas.push({
        name : $(this).data('name'),
        rating : $(this).data('rating'),
        vegetarian : $(this).data('vegetarian')
      });
    });

  myApp.factory('Pizzas', function(){
    Pizzas.types = Pizzas;
    return Pizzas;
  });

  function PizzaCtrl($scope,Pizzas){
    $scope.pizzas = Pizzas;
  }

style.css

body {
  margin:25px;
}
.pizza-data {
  display:none;
}