NgModel NgRepeat與Angular Bootstrap DualListbox

Question

正如我的問題的標題所暗示的，我在NgRepeat中使用了Angular Bootstrap DualListbox，但沒有任何運氣讓NgModel正常工作。讓我試着來模仿我在下面做什麼...

ctrl.js

... 
$scope.things = mySvc.things; 
$scope.vals = mySvc.vals; 
... 
$scope.selectedVals = []; 
$scope.doStuff = function (aThing) { 
    $http.post(aUrl, { thing: aThing, val = $scope.selectedVals[0].Value }) 
    .success(function() { 
     ... 
    }) 
    .error(function() { 
     ... 
    }); 
}; 

tmp.html

... 
<header ng-repeat-start="thing in things"> 
    {{thing.Name}} 
</header> 
<select 
ng-model="selectedVals" 
ng-options="val.Value for val in vals" 
multiple 
bs-duallistbox 
> 
</select> 
<button type="button" class="btn-lg" ng-click="doStuff(thing.Name)">Do Stuff</button> 
<br ng-repeat-end /> 

我的問題是，我不能讓$scope.selectedVals回暖從Angular Bootstrap DualListbox中進行選擇。我的$scope.doStuff函數正在調用，thing.Name值正確傳遞，但我在控制檯TypeError: Cannot read property 'Value' of undefined中看到錯誤。此外，我可以通過控制檯日誌記錄看到$scope.selectedVals實際上是空的。

我有一個或多或少相同的設置工作在我的網絡應用程序的其他部分，但它不存在於一個NgRepeat，所以我不得不認爲這是問題。此外，我還看過一些關於NgRepeat中NgModel的問題的其他文章（請參閱：here，here,here和here），但我無法弄清楚它們與解決特定問題的方法有何關係有。

任何人都可以指出我做錯了什麼？

Answer 1

我猜主要的問題是，你可能要申報selectedValsArray這樣的：

$scope.selectedVals = new Array(mySvc.things.length); 

而且使用它像這樣在您的看法：

<header ng-repeat-start="thing in things"> 
    {{thing.Name}} 
</header> 
<select 
ngModel="selectedVals[$index]" 
ng-options="val.Value for val in vals" 
multiple 
bs-duallistbox 
> 
</select> 
<button type="button" class="btn-lg" ng-click="doStuff(thing.Name, selectedVals[$index])">Do Stuff</button> 
<br ng-repeat-end /> 

然後你的doStuff函數應該是這樣的：

$scope.doStuff = function (aThing, selectedVal) { 
    $http.post(aUrl, { thing: aThing, val = selectedVal) 
    .success(function() { 
     ... 
    }) 
    .error(function() { 
     ... 
    }); 
};