Write your own Angularjs sort Instructions "original"

  First, let's look at the effect of the command completion. (Note the change in the value of the object in the following pictures)

Before the page is clicked:

After clicking the first time:

Then click the second time after:

  Well, already seen, if you are interested can continue to look down, the next thing is about the Angularjs filter built-in good order function, if the students familiar with this feature can skip the following to talk about the content

    This feature is actually a built-in filter that can be used in HTML and JS code

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

Js:$filter(‘orderBy‘)(array, expression, reverse)

Here we only look at the use of HTML tags, we can see that he needs to pass three values

1.orderby_expression: You need to sort the array

2.expression: Which criteria do you need to sort

3.reverse: Positive or reverse order (Boolean)

See some of the students here may know why I want to create the {"Orderpredicate": "Price", "Orderreverse": false} object.

Because this is not a detailed filter, so you want to understand in depth, login to the official API bar: Http://docs.angularjs.cn/api/ng/filter/orderBy

now we're going to start with the main thing, and first we need to talk about instructions,   no crap first on the code in the analysis  

    Js:

Angular.module(‘MyApp‘,[])
        .controller(‘MyCtrl‘,function(){
            Var vm = this;
            / / Sort the condition of the array
            vm.orderList = [{
                "title" : "price",
                "value" : "price"
            },{
                "title" : "quantity",
                "value" : "count"
            }]
            / / Sort condition object
            vm.orderInfo = {
                orderPredicate : "", / / sorted value
                orderReverse : false//positive and reverse
            }
        })
        .directive(‘orderList‘, function() {
        Return {
            Controller: function($scope, $element, $attrs, $transclude) {
                Var lists = [];//list of sorting criteria
                this.getOpened = function(selectedItem) {
                    / / Control can only click on a sort condition
                    angular.forEach(lists, function(item, key) {
                        If (selectedItem != item) {
                            item.showMe = false;
                        }
                    });
                }
                / / Provide a method, in the generation of the item, put the value into the 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: ‘=‘,// sorting conditions in the array to be sorted
                orderReverse: ‘=‘, // the value of the sort condition
                orderPredicate: ‘=‘, // control the positive or reverse order of the sort
                iconUp: ‘@‘,//ascending icon
                iconDown: ‘@‘,//Descending icon
            },
            Controller: function($scope, $element, $attrs, $transclude) {},
            Require: ‘?^orderList‘, // ‘^’ to determine if there is a parent container oederList, ‘?’ can avoid error when orderList does not exist
            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 rendering at the beginning of all the icons are not displayed
                $scope.showMe = false;
                //Talk about the rendered item in the list of the parent container.
                controller.addItem($scope);
                / / Click on the item event
                $scope.toogle = function(value) {
                    //Positive and reverse switching
                    $scope.orderReverse = !$scope.orderReverse;
                    / / Assign the value to the sorting condition
                    $scope.orderPredicate = value;
                    //and display the icon
                    $scope.showMe = true;
                    / / Close the icon of other items
                    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>

  Some students may be puzzled ng-controller= "Myctrl as VM" What this means, in fact, this is ANGULARJS recommended wording, in order to avoid the $scope with the archetype of the inheritance to confuse. If the controller does not inherit the relationship, big does not use $scope!!!! After all, it's all $scope and not so beautiful.

Most of the explanations are in the comments, if there is a problem can be asked below, and the icon here is not support images, only support icons, need to introduce BOOTSTRAP.CSS and the inside of the icon function.

Write your own Angularjs sort Instructions "original"