Skip to content

Instantly share code, notes, and snippets.

@wcc526
Created September 26, 2015 12:06
Show Gist options
  • Save wcc526/c64510ab24fd9b676b8c to your computer and use it in GitHub Desktop.
Save wcc526/c64510ab24fd9b676b8c to your computer and use it in GitHub Desktop.
angularjs

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';
    });
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment