Angular JS basics 101

Make the hml markup dynamic.

by Joe Cisneros

HTML

<html ng-app>
<body ng-controller="PhoneListCtrl">
 
  <ul>
    <li ng-repeat="phone in phones">
    <b>{{phone.name}}</b>
      <p>{{phone.snippet}}</p>
    </li>
    <li>NO of phones: {{ phones.length }}</li>
  </ul>
</body>
</html>

JavaScript

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}