ngRepeat自定義索引空白

Question

我在我的應用程序中使用大量數組。爲了使拼接出基於用戶的選擇我的數據集的具體數據，我已經構建我的陣列，這樣的例子：

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

這讓我的拼接特定元素，而無需通過遍歷整個集合循環：

userList.splice(user1.id, 1); 

但是，當我嘗試使用ng-repeat語句在我的HTML中創建用戶列表時，它出現空白。我的HTML是：

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

我懷疑ngRepeat默認使用0,1,2 ..並不知道如何處理我的自定義索引。我檢查了幾個來源，但我無法真正理解事情。它通過簡單地將它們推入數組而不是將它們分配給特定的索引來添加我的用戶，但它確實有效，所以我知道我的其他代碼工作正常。

幫助？ d：

編輯：

添加trackBy 「的user.id軌道」 並沒有解決它。

普朗克！ http://plnkr.co/edit/8hANBvXAIplHsq0Ph6GX?p=preview

Answer 1

改變每一個人用戶numeric從alpha-numeric的id爲指向的Adbul，array's指數是基於

爲如number： -

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

，然後嘗試$scope.userList[user1.id] = user1;

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

Answer 2

請按照

控制器：

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

查看：

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

Answer 3

您的代碼不工作，因爲數組的索引是從零開始的意思，他們從0，1，2，...，N並且如果您檢查下面的代碼片段，則會嘗試將字母數字索引放在數組的長度爲零的位置。

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;

所以，你需要正確設置數據結構，你可以按如下指定數組的索引設置或使用陣列上的push功能到一個新的項目添加到陣列。

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); 

我建議你從userList到users看起來乾淨更改集合名稱，你不需要後綴的集合與文章我認爲它看起來亂糟糟的，只要名字複數。

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>