NgModel Inside NgRepeat с угловым бутстрапом DualListbox

Question

Как следует из названия моего вопроса, я использую Angular Bootstrap DualListbox внутри NgRepeat, но мне не повезло, что 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, поэтому я должен предположить, что это проблема. Кроме того, я видел некоторые другие сообщения о проблемах, которые люди имели с NgModel внутри NgRepeat (см .: 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() { 
     ... 
    }); 
};