首先,给大家看看指令完成的效果。(请注意区分下面几张图片中,对象值的变化)

     

  好了,效果图已经看完了,如果大家有兴趣的话可以继续往下看,接下来要讲的是关于angularJs中filter内置好的order功能,如果熟悉这个功能的同学们可以跳过下面要讲的内容

    orderBy这个功能其实是内置的过滤器,他可以在html和js代码中使用

    html:{{ orderBy_expression | orderBy : expression : reverse}}

    js    :$filter('orderBy')(array, expression, reverse)

    在这里我们只看html标签的运用,可以看出来他需要传入三个值

      1.orderBy_expression :你需要排序的数组

      2.expression :你需要根据哪个条件排序

      3.reverse :正序还是倒序(boolean)

    看到这里可能有的同学就知道为什么我要创建效果图中的这样的{"orderPredicate":"price","orderReverse":false}对象了。

    由于这里不是详细讲过滤的所以想深入理解的话 登录官方的API吧 : http://docs.angularjs.cn/api/ng/filter/orderBy

  现在开始进入主要内容了,首先我们要讲的是指令,不废话先上代码在分析  

    js:

angular.module('MyApp',[])
.controller('MyCtrl',function(){
var vm = this;
//排序条件的数组
vm.orderList = [{
"title" : "价格",
"value" : "price"
},{
"title" : "数量",
"value" : "count"
}]
//排序条件对象
vm.orderInfo = {
orderPredicate : "",//排序的值
orderReverse : false//正反序
}
})
.directive('orderList', function() {
return {
controller: function($scope, $element, $attrs, $transclude) {
var lists = [];//排序条件的列表
this.getOpened = function(selectedItem) {
//控制只能点击一个排序条件
angular.forEach(lists, function(item, key) {
if (selectedItem != item) {
item.showMe = false;
}
});
}
//提供方法,在item生成的时候,将值放入lists中
this.addItem = function(item) {
lists.push(item);
}
},
restrict: 'AE',
template: '<ul class="list-group" ng-transclude></ul>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {}
};
})
.directive('orderListItem', function() {
return {
scope: {
orderVaule: '=',//即将排序数组中的排序条件
orderReverse: '=',//排序条件的值
orderPredicate: '=',//控制排序的正序或倒序
iconUp: '@',//升序图标
iconDown: '@',//降序图标
},
controller: function($scope, $element, $attrs, $transclude) {},
require: '?^orderList',//'^'判断是否存在父容器oederList,'?'可以避免orderList不存在的时候不报错
restrict: 'AE',
template: '<li class="list-group-item" ng-click="toogle(orderVaule)">' +
'<span ng-transclude></span>' +
'<i ng-show="showMe" class="glyphicon pull-right" ng-class="{true:\'{{iconUp}}\',false:\'{{iconDown}}\'}[orderReverse]"></i>' +
'</li>',
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
//item渲染刚开始所有的图标都不显示
$scope.showMe = false;
//讲渲染的item加入父容器的lists中
controller.addItem($scope);
//点击item事件
$scope.toogle = function(value) {
//正反序切换
$scope.orderReverse = !$scope.orderReverse;
//将值赋予排序条件
$scope.orderPredicate = value;
//并显示图标
$scope.showMe = true;
//关闭其他item的图标
controller.getOpened($scope);
}
}
};
})

    html:

<body ng-controller="MyCtrl as vm">
<order-list>
<order-list-item ng-repeat="item in vm.orderList" icon-up="glyphicon-arrow-up" icon-down="glyphicon-arrow-down" order-vaule="item.value" order-reverse="vm.orderInfo.orderReverse" order-predicate="vm.orderInfo.orderPredicate">
{{item.title}}
</order-list-item>
</order-list>
{{vm.orderInfo}}
</body>

  可能有些同学疑惑 ng-controller="MyCtrl as vm" 这是什么意思,其实这是angularJs推荐的写法,为了避免与$scope的原型继承搞混。毕竟全部都是$scope也不太美观,实际上是这样的 var vm =$scope.vm = {}

  大部分的讲解都在注释上了,如果有问题的可以在下方提问;另外这里的图标是不支持图片的,只支持图标,需要引入bootstrap.css和里面的图标功能。

自己写的angularJs排序指令【原创】的更多相关文章

  1. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  2. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

  3. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. AngularJs自定义指令详解(2) - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  8. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  9. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

随机推荐

  1. javaWEB总结(3):ServletConfig对象

    1.首先找到ServletConfig的API: ServletConfig封装了servlet的配置信息,并且可以获取servletContext对象. ServletConfig共有四个方法: 1 ...

  2. MyBatis学习-SQL 符号篇

    当我们需要通过 XML 格式处理 SQL 语句时,经常会用到 <,<=,>,>= 等符号,但是很容易引起 XML 格式的错误,这样会导致后台将 XML 字符串转换为 XML文档 ...

  3. thinkphp整合系列之短信验证码、订单通知

    现在这个短信通知泛滥的年代:应用如果没有个短信注册:你都不敢说你是搞开发的: 这个验证码搞起来是不难的:但是如果刚接触也是有点不知从哪下手的迷茫: 先讲下概念: 要想发送验证码:需要至少三项:appi ...

  4. float的精度,3个小数相加后精度丢失--小数比较使用bccomp()方法

    $a = 1200.00;$b = 1199.80;$c = 0.1;$u = 0.12; $d = $b+$c+$u;var_dump($a);var_dump($d);var_dump(bccom ...

  5. 安装lnmp(linux nginx mysql php)

    下载或者在云盘里找lnmp1.2-full.tar.gz 用 tar -zxvf lnmp1.2-full.tar.gz解压 进入 ,运行./install.sh安装.根据提示. 如果出现yum锁定, ...

  6. 【Holograms 101D】一步步用Unity 开发 Hologram

    转载请注明出处: copperface:[Holograms 101D]一步步用Unity 开发 Hologram Holograms 101 该教程将带领你走完 Hologram 创建 的全过程.整 ...

  7. IO模式设置网络编程常见问题总结—IO模式设置,阻塞与非阻塞的比较,recv参数对性能的影响—O_NONBLOCK(open使用)、IPC_NOWAIT(msgrcv)、MSG_DONTWAIT(re

    非阻塞IO 和阻塞IO: 在网络编程中对于一个网络句柄会遇到阻塞IO 和非阻塞IO 的概念, 这里对于这两种socket 先做一下说明:       基本概念: 阻塞IO:: socket 的阻塞模式 ...

  8. accept: Invalid argument linux 网络编程

    今天测试一个本地网络通讯,在ubuntu虚拟机下出现的问题,警报:accept: Invalid argument 初始化地方: socklen_t clilen;struct sockaddr_in ...

  9. 最近关于ACM训练与算法的总结

            到了大四以后越来越意识到基础知识的重要性,很多高屋建瓴的观点与想法都是建立在坚实的基础之上的, 招式只有在强劲的内力下才能发挥最大的作用,曾经有段时间我有这样的想法:我们出去以后和其他 ...

  10. PoolManager 简单使用

    如图,创建空物体并命名 PoolManager,添加 脚本 spawn pool,并添加 如上图右边一些 参数,prefab为 Resources中 的预置体. 添加 空物体并 改名,如上图,并添加脚 ...