orderby - order by number angularjs

Angularjs índice incorrecto $ después de la ordenBy

Question

Soy nuevo en Angular.js y tengo algunos problemas para ordenar mi matriz y trabajar en los datos ordenados.

Tengo una lista con elementos y quiero ordenarla por "Store.storeName", que está funcionando hasta el momento. Pero después de ordenar los datos, mi función de eliminación ya no funciona. Creo que eso se debe a que el índice $ es incorrecto después de la clasificación, por lo que se eliminan los datos incorrectos.

¿Cómo puedo resolver eso? Ordenar los datos en el alcance y no en la vista? ¿Como hacer eso?

Aquí hay un código relevante:

En la vista:

<tr ng-repeat="item in items | orderBy:''Store.storeName''">
                <td><input class="toggle" type="checkbox" ng-model="item.Completed"></td>
                <td>{{item.Name}}</td>
                <td>{{item.Quantity}} Stk.</td>
                <td>{{item.Price || 0 | number:2}} €</td>                
                <td>{{item.Quantity*item.Price|| 0 | number:2}} €</td>
                <td>{{item.Store.storeName}}</td> 
                <td><a><img src="img/delete.png" ng-click="removeItem($index)">{{$index}}</a></td>
            </tr>

Y en mi controlador tengo esta función de eliminación, que debería eliminar los datos específicos:

$scope.removeItem = function(index){
        $scope.items.splice(index,1);
    }

Esto funciona bien antes de ordenar en la Vista. Si falta algo importante, déjame ahora.

¡Gracias!

Answer 1

Empecé a aprender problemas angulares y similares, y en función de la respuesta de @ pkozlowski-opensource, lo resolví con algo así como

<a>
  <img src="img/delete.png" ng-click="removeItem(items.indexOf(item))">
  {{items.indexOf(item)}}
</a> 

Answer 2

En caso de que alguien necesite usar $index , puede darle un nombre a la matriz ordenada / filtrada:

<tr ng-repeat="item in sortedItems = (items | orderBy:''Store.storeName'') track by $index">

Vea mi respuesta here .

Answer 3

En su lugar, o retransmitir en el $index que, como habrás notado, apuntará al índice en una matriz ordenada / filtrada, puedes pasar el elemento a tu función removeItem :

<a><img src="img/delete.png" ng-click="removeItem(item)">{{$index}}</a>

y modifique la función removeItem para encontrar un índice utilizando el método indexOf de una matriz de la siguiente manera:

$scope.removeItem = function(item){
   $scope.items.splice($scope.items.indexOf(item),1);
}

Answer 4

Hubiera dejado un comentario, pero no tengo la "reputación".

La solución de mile es exactamente lo que necesitaba también. Para responder a la pregunta de pkozlowski.opensource: cuando has anidado ngRepeat , una lista dinámica (por ejemplo, donde permites las eliminaciones) o ambas (que es mi caso), usar $index no funciona porque será un índice incorrecto para el Los datos de back-end después de ordenar y usar ngInit para almacenar en caché el valor tampoco funcionan porque no se vuelven a evaluar cuando la lista cambia.

Tenga en cuenta que la solución de milla permite que el nombre de propiedad del índice adjunto se personalice al pasar un parámetro <tr ng-repeat="item in items | index:''originalPosition'' | orderBy:''Store.storeName''">

Mi versión retocada:

.filter( ''repeatIndex'', function repeatIndex()
{
// This filter must be called AFTER ''filter''ing 
//  and BEFORE ''orderBy'' to be useful.
    return( function( array, index_name )
    {
        index_name = index_name || ''index'';
        array.forEach( function( each, i )
        {each[ index_name ] = i;});
        return( array );
    });
})

Answer 5

Prueba esto:

$scope.remove = function(subtask) {

    var idx = $scope.subtasks.indexOf(subtask),
        st = $scope.currentTask.subtasks[idx];

    // remove from DB
    SubTask.remove({''subtaskId'': subtask.id});

    // remove from local array
    $scope.subtasks.splice(idx,1);

}

Puede encontrar una explicación detallada en esta entrada en mi blog.

Answer 6

Tuve el mismo problema y otras respuestas en este tema no son adecuadas para mi situación.

He resuelto mi problema con filtro personalizado:

angular.module(''utils'', []).filter(''index'', function () {
    return function (array, index) {
        if (!index)
            index = ''index'';
        for (var i = 0; i < array.length; ++i) {
            array[i][index] = i;
        }
        return array;
    };
});

que se puede usar de esta manera:

<tr ng-repeat="item in items | index | orderBy:''Store.storeName''">

y luego en HTML puede usar item.index lugar de $index .

Este método es adecuado para las colecciones de objetos.

Tenga en cuenta que este filtro personalizado debe ser el primero en la lista de todos los filtros aplicados (orderBy, etc.) y agregará el index propiedad adicional (el nombre es personalizable) en cada objeto de la colección.