AngularJS Program 2 – Loop using ng-repeat and ng-controller directives

repeat-AngularJS.html

<html ng-app>
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
    
    <p>Total number of phones: {{phones.length}}</p>
    <hr />
    <ul>
        <li ng-repeat="phone in phones">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
    </ul>
    <hr />
    Binding Value : {{hello}}
    <hr />
    <table border="1">
        <tr>
            <th>Row Number</th>
        </tr>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
            <td>{{'Row : ' + i}}</td>
        </tr>
    </table>
 

    <hr />
    
</body>
</html>


 controllers.js

function PhoneListCtrl($scope) {
    $scope.phones = [
        {"name": "Nexus S",
        "snippet": "Fast just got faster with Nexus S.",
        "age": 0},
        {"name": "Motorola XOOM™ with Wi-Fi",
        "snippet": "The Next, Next Generation tablet.",
        "age": 1},
        {"name": "MOTOROLA XOOM™",
        "snippet": "New Tablet.",
        "age": 2}
    ];
     
    $scope.orderProp = 'snippet';
    
    $scope.hello = "Hello, World!"

}


 

You can leave a response, or trackback from your own site.

Leave a Reply