如何在指令中使用 `ng-bind` 对值进行排序

Question

我正在从控制器获取集合到指令。我要附加到模板的地方。

我需要在这里完成两件事

加载集合 - 对其进行排序
输入更改时，（模型更改）需要重新排序数组值。

我试了两个都不行。有人在这里澄清问题并对问题进行排序吗？

这是我的代码：

   app.directive("customGrid", function($timeout,$filter){
  return{
    scope:{ 
      "pages":"="
    },
    template:temp.join(''),
    link : function( scope, element, attrs ){
      scope.slice = null;

      scope.sortIt = function( value ){
        scope.pages.pin = $filter('orderBy')( value, '');
        console.log( scope.pages.pin ); 
//consoles sorted not updating in view
        scope.$apply(); 
      }

      $timeout(function(){
       scope.slice = scope.pages.pin;

       scope.sortIt( scope.slice );

      })

    }
  }
})

Live Demo

Answer 1

怎么样？使用本机 angular 排序和自己的过滤器，还将整个对象传递给指令，因为在那里使用 3 个单独的平面数组可能会很棘手。 plnkr

var temp = [
  "<ul><li ng-repeat='obj in slice | myOrder:obj:reverse'>",
  "<input ng-model='obj.pin' type='text'/></li></ul>"
  ]

app.filter('myOrder', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (parseInt(a.pin) > parseInt(b.pin) ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});



app.directive("customGrid", function($timeout,$filter){
  return{
    scope:{ 
      "pages":"="
    },
    template:temp.join(''),
    link : function( scope, element, attrs ){
      scope.slice = null;
      $timeout(function(){
       scope.slice = scope.pages;
       console.log(scope.slice,scope.pages)
      })


      //console.log( sorted ); //not sorting
    }
  }
})

编辑 Plnkr without orderBy 不过，在不知道项目的细节和要求的情况下很难说。我可以说，根据自己的经验，使用一些虚拟重复技术通常会更好（或者，在表格的情况下，使用一些与 Angular 一起使用的专用香草脚本）。

如何在指令中使用 `ng-bind` 对值进行排序

How to use `ng-bind` in directive for sorting the values

sorting

angularjs

angular-directive