<!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; }