zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    网络配置
    mysql和mongodb的区别
    HTTP和HTTPS
    网络架构/结构
    SKU和SPU表的设计
    第三方-FastDFS分布式文件系统
    并发和并行
    多任务-线程、进程、协程的一些见解
    多任务-协程
    多任务-协程之生成器
  • 原文地址:https://www.cnblogs.com/pengpenghappy/p/3802787.html
Copyright © 2011-2022 走看看