Comment utiliser `ng-bind` dans la directive pour trier les valeurs

Question

Je ramène la collection du contrôleur à la directive. où je joins au modèle.

i nécessaire pour atteindre 2 choses ici

1. la charge de la collection - que ce soit trié
2. Le changement d'entrée, (changement de modèle) requried pour trier à nouveau les valeurs du tableau.

pour mon essai les deux ne fonctionne pas. Quelqu'un peut-il clarifier la question ici et régler le problème?

voici mon code:

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

Comment cela? En utilisant le tri angulaire natif avec son propre filtre, on passait aussi des objets entiers à la directive, car il peut être difficile d'y travailler avec trois tableaux plats séparés. 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 
    } 
    } 
}) 

EDIT Plnkr without orderBy Pourtant, il est difficile de dire sans connaître les détails & exigences du projet. Je peux dire, d'après notre propre expérience, il est souvent préférable d'utiliser des techniques de répétition virtuelle (ou, dans le cas des tables, des scripts vanilla dédiés qui fonctionnent avec Angular).