Mi HTML:

<section  ng-repeat="Rule in Data track by $index" ng-if="!Rule.is_deleted">
    {{$index}}
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

Y la controladora:

$scope.removeElem = function (elemIndex) {
     $scope.Data[elemIndex].is_deleted = true;              
}

$scope.addElem = function(obj) {
    $scope.Data.push(obj);
}

Hay una funcionalidad de agregar / eliminar objetos a / desde la matriz $scope.Data. Digamos que hay dos elementos en $ scope.Data; Estoy eliminando uno y agrego uno nuevo. Por lo tanto, los artículos siguen siendo dos. El problema es que $ index asocia el segundo elemento recién creado con el valor 2 y no el valor 1 como esperaba (ng-if elimina el elemento del DOM, ¿no?). ¿Por qué eso? ¿Cómo puedo obligar a $ index a disminuir su valor si elimino un artículo?

1
Unknown developer 29 dic. 2016 a las 19:49

3 respuestas

La mejor respuesta

Probablemente desee filter en lugar de utilizar {{X1} } en el ng-repeat.

<section ng-repeat="Rule in (Data | filter: {is_deleted: false}) track by $index">
    {{$index}}
    {{ Rule.title }}<a ng-click="removeElem($index)"></a> 
</section>

Violín que muestra la diferencia: https://jsfiddle.net/u6nqrq5o/

1
TheSharpieOne 29 dic. 2016 a las 16:56

Debe evitarse el uso de $ index. En lugar de usar $ index, prefiera pasar los objetos reales. P.ej. ng-click = "removeElem (Regla)"

0
Sumit Deshpande 29 dic. 2016 a las 16:57

No use $ index para esto, simplemente pase el objeto a la función. Además, este es un mejor caso de uso para un filtro en lugar de usar ng-if para ocultar / mostrar una fila

HTML

<section ng-repeat="Rule in Data | filter: {is_deleted: false}">
  {{ Rule.title }}
  <a ng-click="removeElem(Rule)">Remove</a>
</section>

Controlador

$scope.removeElem = function(rule) {
  rule.is_deleted = true;
};
1
jbrown 29 dic. 2016 a las 17:06