Generate List and Table via ng-repeat

<div ng-app ng-controller='StudentListController'>
    <ul>
        <li ng-repeat='student in students'>
            <a href='/student/view/{{student.id}}'>{{student.name}}</a>
        </li>
    </ul>
    <button ng-click="insertTom()">Insert</button>

    <br />

    <table class="table-bordered" ng-controller='AlbumController'>
        <tr ng-repeat='track in album'>
            <td>{{$index + 1}}</td>
            <td>{{track.name}}</td>
            <td>{{track.duration}}</td>
        </tr>
    </table>
</div>

<script src="~/Scripts/angular.js"></script>
<script>
    var students = [{ name: 'Mary Contrary', id: '1' },
    { name: 'Jack Sprat', id: '2' },
    { name: 'Jill Hill', id: '3' }];
    function StudentListController($scope) {
        $scope.students = students;
        $scope.insertTom = function () {
            $scope.students.splice(1, 0, { name: 'Tom Thumb', id: '4' });
        };
    }

    var album = [{ name: 'Southwest Serenade', duration: '2:34' },
    { name: 'Northern Light Waltz', duration: '3:21' },
    { name: 'Eastern Tango', duration: '17:45' }];
    function AlbumController($scope) {
        $scope.album = album;
    }
</script>

posted @ 2014-06-22 17:47  PengpengSong  阅读(262)  评论(0编辑  收藏  举报