AngularJS Simple Template Example

AngularJS Simple Template Example

HTML

<script type="text/ng-template" id="embedded.home.html">
  <h3>Users</h3>
  <h5>Demo of  xurple filter on users key- name,skills(array), lattitde, address and gender</h5>
  <p>You can add the keys in the filter usage inside ng-repeat</p>
  <input ng-model="search.query" type="text" placeholder="search by name, gender, address or lattitude">
  <br>
  <span class="badge">{{ users.length}}</span>
  <br>
  <table border="1" style="margin-top:30px;">
    <tr>
      <th>Name</th>
      <th>Gender</th>
      
      <th>Skills</th>
      <th>Company</th>
      <th>Address</th>
      <th>Zip Code</th>
      <th>Lattitude</th>
      <th>Longitude</th>
    </tr>

    <tr ng-repeat="user in users |  xf:search:['name','gender','skills','location.address','location.coords.lat']">
      <td>{{user.name}}</td>
      <td>{{user.gender}}</td>
    
      <td>{{user.skills.toString()}}</td>
      <td>{{user.company}}</td>
      <td>{{user.location.address}}</td>
      <td>{{user.location.zip}}</td>
      <td>{{user.location.coords.lat}}</td>
      <td>{{user.location.coords.lng}}</td>
    </tr>
  </table>
</script>
<script type="text/ng-template" id="embedded.about.html">

</script>
<div>


  <div ng-view></div>
</div>

CSS

input{
  width:100%;
  padding:10px;
}

JavaScript

var templatesExample = angular.module('FunnyAnt.Examples.Templates', []);
templatesExample.controller('HomeController', function($scope) {
  $scope.users = [{
      "name": "Terri Maddox",
      "gender": "female",
      "company": "EXOTECHNO",
      "email": "[email protected]",
      "skills":["Cooking","Running"],
      "phone": "+1 (947) 425-2928",
      "location": {
        "address": "533 Kenilworth Place, Southmont, Utah",
        "zip": 9685,
        "coords": {
          "lat": -20.158129,
          "lng": 90.507106
        }
      }
    },
    {
      "name": "Cornelia Booker",
      "gender": "female",
      "company": "XINWARE",
      "email": "[email protected]",
      "skills":["Snooker","Football"],
      "phone": "+1 (983) 600-3330",
      "location": {
        "address": "196 Montgomery Street, Springhill, California",
        "zip": 7616,
        "coords": {
          "lat": 79.003269,
          "lng": -26.30452
        }
      }
    },
    {
      "name": "Koch Santiago",
      "gender": "male",
      "company": "MUSIX",
      "email": "[email protected]",
      "skills":["Reading","Running"],
      "phone": "+1 (989) 548-2446",
      "location": {
        "address": "283 Wogan Terrace, Waiohinu, Mississippi",
        "zip": 3336,
        "coords": {
          "lat": 33.218419,
          "lng": -86.487398
        }
      }
    },
    {
      "name": "Perkins Berger",
      "gender": "male",
      "company": "MACRONAUT",
      "email": "[email protected]",
      "skills":["Nothing","Zero"],
      "phone": "+1 (919) 600-3704",
      "location": {
        "address": "669 Gold Street, Gouglersville, Kentucky",
        "zip": 5036,
        "coords": {
          "lat": -38.526252,
          "lng": 178.047319
        }
      }
    },
    {
      "name": "Mari Valenzuela",
      "gender": "female",
      "company": "MAXIMIND",
      "email": "[email protected]",
      "skills":["Exercise","Climbing"],
     ...