<!DOCTYPE html5> <html> <head> <title>AngularJs的练习</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="css/5.css"/> </head> <body> <h1>关于AngularJs的小demo练习</h1> <p>注：要看此demo的效果，必须开服务器，不能本地访问（因为请求了json数据）</p> <h3>题目描述：</h3> <p>在Model中创建一个员工数组，每个员工都有姓名、生日、工资、个人简介几个属性，把所有数据显示在一个view中的表格里</p> <div ng-app="myModule1" ng-controller="myCtr1"> <button ng-click="addData()">添加数据</button> <label>请输入关键字，进行筛选</label><input ng-model="keyWords" type="text"/> <p></p> <table> <thead> <th><a href="javascript:void(0)" ng-click="orderName()">姓名</a></th> <th><a href="javascript:void(0)" ng-click="orderBirthday()">生日</a></th> <th><a href="javascript:void(0)" ng-click="orderSalary()">工资</a></th> <th>个人简介</th> </thead> <tbody> <!-- 此处用到了filter和orderBy过滤器（两个过滤器连用） --> <tr ng-repeat="employee in ( employees | filter : keyWords | orderBy : orderPropertyName : reverse)"> <td>{{ employee.ename }}</td> <td>{{ employee.birthday | date : 'yyyy-MM-dd'}}</td> <td>{{ employee.salary | currency : '￥'}}</td> <td>{{ employee.intro }}</td> </tr> </tbody> </table> </div> <script src="js/angular.js"></script> <script src="js/5.js"></script> </body> </html>
对应的js文件：
angular.module('myModule1',[])
.controller('myCtr1',function($scope,$http){
$scope.reverse=false;
$scope.addData=function(){
/*$scope.employees=[
{ename:'Tom',birthday:1423423,salary:123332,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
{ename:'Lily',birthday:24423423,salary:322,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
{ename:'Bom',birthday:42344423,salary:722,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
{ename:'Hung',birthday:44323423,salary:12,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
{ename:'Dgyj',birthday:55423423,salary:22,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
{ename:'Jenny',birthday:66223423,salary:522,intro:'她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'}
];*/
//上面也是对着呢，因为后面使用了json文件模拟数据，故将其注释
//使用AS中的$http发起AJAX请求，获取服务端的数据--要看此demo的效果，必须开服务器，不能本地访问
$http.get('json/5.json')
.success(function(receiveData){
$scope.employees=receiveData;
})
.error(function(){
console.log('我请求数据失败了');
});
};
// 按照姓名进行排序
$scope.orderName=function(){
$scope.orderPropertyName='ename';
$scope.reverse=!$scope.reverse; //达到正序、逆序排序相交替的效果
};
//按照生日进行排序
$scope.orderBirthday=function(){
$scope.orderPropertyName='birthday';
$scope.reverse=!$scope.reverse;
};
//按照工资进行排序
$scope.orderSalary=function(){
$scope.orderPropertyName='salary';
$scope.reverse=!$scope.reverse;
};
});
对应的json文件：
[
{"ename":"Tom","birthday":1423423,"salary":123332,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
{"ename":"Lily","birthday":24423423,"salary":322,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
{"ename":"Bom","birthday":42344423,"salary":722,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
{"ename":"Hung","birthday":44323423,"salary":12,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
{"ename":"Dgyj","birthday":55423423,"salary":22,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
{"ename":"Jenny","birthday":66223423,"salary":522,"intro":"她是这样的，为人很好，我们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"}
]
// 注：json数据中名与字符串都必须使用双引号，否则请求会失败
对应的css文件：
table{ width:950px; border-collapse:collapse; } a{ text-decoration:none; } th,td{ border:green solid 1px; padding:5px; }