<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.dataList = [ 'aaaaa' , 'bbbbb' , 'cccccc' ]; }]); </script> </head> <body> <div ng-controller="Aaa"> <ul> <li ng-repeat=" data in dataList ">{{data}}</li> </ul> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ var oriArr = [ { name : "red" , age : "20" }, { name : "yellow" , age : "40" }, { name : "blue" , age : "30" }, { name : "green" , age : "10" } ]; $scope.dataList = oriArr; $scope.fnSort = function(arg){ arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg]; //$filter是形参传过来的，orderBy是调用过滤器的orderBy方法，$scope.dataList是过滤的集合，arg是按照什么排序，arguments.callee['fnSort'+arg]为true则从小到大排序为false则从大到小排序。 $scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] ); }; $scope.fnFilter = function(){ //$filter('filter')表示调用过滤器的filter方法，$scope.filterVal是filter方法过滤的关键词 $scope.dataList = $filter('filter')( oriArr , $scope.filterVal );//dataList变化了视图也跟着变化了 }; }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" value="搜索"> <table border="1"> <tr> <th ng-click="fnSort('name')">姓名</th> <th ng-click="fnSort('age')">年龄</th> </tr> <tr ng-repeat="data in dataList"> <td>{{ data.name }}</td> <td>{{ data.age }}</td> </tr> </table> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .active1{ background:red;} .active2{ background:blue;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.dataList = [ 'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee' ]; }]); </script> </head> <body> <div ng-controller="Aaa"> <ul> <li ng-repeat=" data in dataList ">{{ $even }}</li>//奇数行返回true //隔行换色 <li class="{{ $even ? 'active1' : 'active2' }}" ng-repeat=" data in dataList ">{{ data }}</li> </ul> //循环3个标签div,p,div <div ng-repeat-start="data in dataList">{{data}}</div> <p>{{data}}</p> <div ng-repeat-end>{{data}}</div> </div> </body> </html>