ngRepeat mit benutzerdefinierten Index kommt leer

Question

Ich verwende eine große Anzahl von Arrays in einer großen Form in meiner Anwendung. Um Ausspleißen spezifische Daten von meinem Datensätze auf dem Benutzer-Auswahl basiert zu machen, habe ich wie in diesem Beispiel meine Arrays aufgebaut:

var userList = []; 
userList[user1.id] = user1; 
userList[user2.id] = user2; 

Das bin ich bestimmte Elemente können Spleiß, ohne durch die Verwendung durch die gesamte Kollektion Looping:

userList.splice(user1.id, 1); 

aber wenn ich versuche, eine Liste der Benutzer in meinem HTML zu machen eine ng-repeat-Anweisung, kommt es auf leer. Mein HTML ist:

<div data-ng-repeat="user in userList">{{user.name}}</div> 

Ich vermute, dass ngRepeat 0,1,2 verwendet .. standardmäßig und nicht weiß, wie meine benutzerdefinierte Indizes zu behandeln. Ich habe mehrere Quellen überprüft, aber ich kann nicht wirklich einen Sinn ergeben. Es funktionierte, als ich meine Benutzer hinzufügte, indem ich sie einfach in das Array schob, anstatt sie einem bestimmten Index zuzuordnen, also weiß ich, dass der Rest meines Codes gut funktioniert.

Hilfe? D:

EDIT:

Die Zugabe eines trackBy "Spur von user.id" hat es nicht beheben.

Plunkr! http://plnkr.co/edit/8hANBvXAIplHsq0Ph6GX?p=preview

Answer 1

Änderung der id jedes einzelnen Benutzers zu numeric von alpha-numeric wie Adbul hingewiesen, array's Indizes sind number

basierend

für zB: -

var user1 = { 
    id: 0, //Any numeric Value 
    name: 'Pete' 
} 

und versuchen dann $scope.userList[user1.id] = user1;

<div data-ng-repeat="user in userList">{{user.name}}</div> 

Answer 2

Do folgend

Controller:

$scope.userList = []; 
    $scope.userList.push(user1); 
    $scope.userList.push(user2); 

Ausblick:

 <tr ng-repeat="user in userList track by $index"> 
     <td>{{user.id}}</td> 
     <td>{{user.name}}</td></tr> 

Answer 3

Ihr Code nicht funktioniert, weil Array-Indizes Bedeutung Null-basierte, sie gehen von 0, 1, 2, ... n und Sie versuchen, alphanumerische Indizes zu setzen, wenn Sie das untenstehende Code-Snippet überprüfen, ist die Länge des Arrays Null.

var user1 = { 
 
    id: 'A1B2', 
 
    name: 'Pete' 
 
}; 
 

 
var user2 = { 
 
    id: 'A2B3', 
 
    name: 'Jeff' 
 
}; 
 

 
var userList = []; 
 
userList[user1.id] = user1; 
 
userList[user2.id] = user2; 
 
console.log(userList); 
 
console.log('length: ' + userList.length); 
 
console.log(userList['A1B2']); 
 
console.log(userList.A1B2); // behaving as JavaScript Object not array as property set using userList[user2.id] = user2;

Sie müssen also richtig die Datenstruktur setzen, Sie können diese Funktion wie folgt den Index des Arrays angeben oder die push Funktion auf dem Array ein neues Element hinzuzufügen das Array.

var user1 = { 
    id: 'A1B2', 
    name: 'Pete' 
    }; 

    var user2 = { 
    id: 'A2B3', 
    name: 'Jeff' 
    }; 

    $scope.userList = []; 
    $scope.userList[0] = user1; // $scope.userList.push(user1); 
    $scope.userList[1] = user2; // $scope.userList.push(user2); 

Ich schlage vor, Sie den Namen ändern Sammlung von userList zu users es sieht sauber, brauchen Sie nicht eine Sammlung mit der Liste Keyword Suffix ich denke, es unsauber aussieht, nur den Namen Plural machen.

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 

 
function DefaultController() { 
 
    var vm = this; 
 
    var pete = { 
 
    id: 'A1B2', 
 
    name: 'Pete' 
 
    }; 
 

 
    var jeff = { 
 
    id: 'A2B3', 
 
    name: 'Jeff' 
 
    }; 
 

 
    vm.users = []; 
 
    vm.users[0] = pete; 
 
    vm.users[1] = jeff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as ctrl"> 
 
    <div ng-repeat="user in ctrl.users"> 
 
     <span>{{user.id}}, {{user.name}}</span> 
 
    </div> 
 
    </div> 
 
</div>