angularjs - array - Expresiones angulares ng-repetidas como variables

ng-repeat select

Question

Estoy tratando de hacer algo como esto:

<ul>
    <li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>

Pero debido a que la lógica de ng-repeat está en el estado de compilación de la directiva, trata {{myRepeatExpression}} como una cadena normal en lugar de una variable. Lo que no funciona, obviamente.

¿Hay alguna solución para eso?

Answer 1

No puede usar ng-repeat con una cadena / variable que debe representar la expresión directamente, pero puede crear una directiva que interpole / analice este valor y lo pase al argumento ng-repeat y recompile el elemento.

app.directive(''ngVarRepeat'',function($compile){
  return {
    priority:1001, //must be higher than 1000 (priority of ng-repeat)
    compile:function($elm,$attrs){

      var expression = $attrs.ngVarRepeat;
      $elm.removeAttr(''ng-var-repeat''); // remove attribute so we can recompile it later

      return function(scope,elm,attrs){
        $elm.attr(''ng-repeat'',scope.$eval(expression));
        $compile($elm)(scope);
      }
    }
  }
})

Eche un vistazo a este plunker: demo plunker de la respuesta aceptada

También tenga en cuenta que este enfoque debería causar problemas en las repeticiones ng anidadas.

Answer 2

Solo puede usar y expresión con ng-repeat y no un valor interpolated . Ahora, para crear una lista repetible dinámica, puede probar:

1. utilizando una función que devuelve la lista dinámicamente en la ng-repeat ; esto es potencialmente más costoso ya que angular necesita llamar a la función primero y luego determinar si la colección ha cambiado al realizar un ciclo de $digest
2. $watch una variable en particular en el ámbito que desencadene un cambio de la lista; potencialmente más eficiente, pero si su lista dinámica depende de más de una variable, puede obtener más detalles y puede llevar a posibles errores a olvidarse de agregar un nuevo $watch cuando se requiere una nueva variable

Demo plunker

JS:

app.controller(''MainCtrl'', function($scope) {
  var values1 = [{name:''First''}, {name:''Second''}];
  var values2 = [{name:''Third''}, {name:''Fourth''}, {name:''Fifth''}];

  //1. function way
  $scope.getValues = function(id) {
    if(id === 1) {
      return values1;
    }
    if(id === 2) {
      return values2;
    }
  }

  //2. watch way
  $scope.values = undefined;
  $scope.$watch(''id'', function(newVal) {
    $scope.values = $scope.getValues(newVal);
  });
});

HTML:

<!-- Here we pass the required value directly to the function -->
<!-- this is not mandatory as you can use other scope variables and/or private variables -->
<ul>
  <li ng-repeat="v in getValues(id)">{{v.name}}</li>
</ul>
<!-- Nothing special here, plain old ng-repeat -->
<ul>
  <li ng-repeat="v in values">{{v.name}}</li>
</ul>

Answer 3

ng-repeat solo lo acepta sintaxis de expresión propietaria como en row in rows , pero las rows pueden ser una función o promesa en su controlador. Sin embargo, debe observar el rendimiento con atención, ya que ng-repeat no funciona bien con cosas que cambian con demasiada frecuencia (el temido error de 10 iteraciones máximo).