用angularjs来实现个啥东西？
- 右边为列表的展示
- 左边search栏为输入筛选的字段，对应的列表展示筛选的结果。
- 左边Sort by 栏为选择排序值，对应的列表展示排序结果。
- Reverse Searchd的值是search input框值得逆序。（可以通过穿件directive或者filter）。
- 点击莫个链接，改变hash值来切换模块，展现不同的页面。（利用n-view或者ng-include指令）。
需要用到的指令以及筛选filter
- ng-app
- ng-repeat
- ng-model
- ng-view
- filter
- orderBy
- 自定义指令ngreverse
代码示例
1
2
| City:<input ng-model="city"/>
City reverse:<span ngreverse="city" style="color:red;"></span>
|
1
2
3
4
5
6
7
8
| appModule.directive('ngreverse', function() {
return function(scope, element, attrs){
scope.$watch(attrs.ngreverse, function(value) {
value = value == undefined ? "" : value;
element.text(reverse(value));
});
};
});
|
代码实现细节
1
2
3
4
5
6
7
8
9
10
11
| var appModule = angular.module('phonecat', []);
appModule.config(
['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'phone-list.html',
controller: PhoneListCtrl
}).when('/:phoneId/:phoneAge', {
templateUrl: 'phone-detail.html',
controller: PhoneDetailCtrl
}).otherwise({redirectTo: '/'});
}]);
|
实现效果
