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() { 
     ... 
    }); 
};