Angular学习3

最新推荐文章于 2023-12-11 23:44:24 发布

HurricanGod

最新推荐文章于 2023-12-11 23:44:24 发布

阅读量255

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/qq_34332010/article/details/52462440

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用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进行排序

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