search , order and direction
< div class ="search ">
< input ng-model ="query " placeholder ="Search for artists " autofocus >
< label class ="formgroup "> by:
< select ng-model ="artistOrder ">
< option value ="name "> Name </ option >
< option value ="reknown "> Reknown </ option >
</ select >
</ label >
< label class ="formgroup ">
< input type ="radio " ng-model ="direction " name ="direction " checked > ascending
</ label >
< label class ="formgroup ">
< input type ="radio " ng-model ="direction " name ="direction " value ="reverse "> descending
</ label >
</ div >
< ul class ="artistlist ">
< li class ="artist cf " ng-repeat ="item in artists | filter: query | order: artistOrder:direction ">
< img ng-src ="images/{{ item.shortname }}_tn.jpg " alt ="Photo of {{ item.name }} ">
< div class ="info ">
< h2 > {{ item.name }} </ h2 >
< h3 > {[ item.reknown }} </ h3 >
</ div >
</ li >
</ ul >
var myApp = angular . module ( 'myApp' , [ ] ) ;
myApp . controller ( 'MyController' , [ '$scope' , '$http' , function ( $scope , $http ) {
$http . get ( 'js/data.json' ) . success ( function ( data ) {
$scope . artists = data ;
// 初始化
$scope . artistOrder = 'name' ;
} ) ;
} ] ) ;