Angular学习3

来源：互联网发布：摄像头实时传输数据编辑：程序博客网时间：2024/05/30 23:04

使用Angular Js创建一个表格

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>    <style>    table, th , td {      border: 1px solid grey;      border-collapse: collapse;      padding: 5px;    }    table tr:nth-child(odd) {      background-color: #f1f1f1;    }    table tr:nth-child(even) {      background-color: #ffffff;    }    </style></head><body><div ng-app="myApp" ng-init="str1='12'; str2='34'" ng-controller="myCtrl">  <p>名字 : <input type="text" ng-model="name"></p>  <h1>Hello {{name}}</h1>    <br/>    <table>        <thead>            <tr>            <td width=100px>学号</td>            <td width=100px>课程号</td>            <td width=100px>分数</td>            </tr>        </thead>        <tr  ng-repeat="cou in course |orderBy: 'Sno'">            <td>{{cou.Sno}}</td>            <td>{{cou.Cno}}</td>            <td>{{cou.Grade}}</td>        </tr>    </table></div><script>var app = angular.module('myApp', []);app.controller('myCtrl',     function($scope)    {        $scope.name = "angular";        $scope.course=[{Sno:"021",Cno:"1425",Grade:66},                      {Sno:"002",Cno:"1425",Grade:67},                      {Sno:"034",Cno:"1425",Grade:68},                      {Sno:"004",Cno:"1425",Grade:96}]    });</script></body></html>

ng-repeat=”cou in course |orderBy: ‘Sno’”

ng-repeat 用于循环访问指定集合中的元素，集合必须是数组或对象
访问集合元素时遵循：“元素 in 集合” 的语法。如”cou in course |orderBy: ‘Sno’”中cou是一个元素变量，上面course集合元素由控制器中$scope添加元素；“ |orderBy: ‘Sno’”是筛选器，在这里是按照Sno进行排序

运行结果：
这里写图片描述

0 0