NgModel внутри NgRepeat с Angular Bootstrap DualListbox

Как следует из названия моего вопроса, я использую 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 (см.: здесь, здесь, здесь и здесь), но я не могу понять как они относятся к решению конкретной проблемы, которая у меня есть.

Может ли кто-нибудь указать, что я делаю неправильно?


angularjs select angularjs-ng-repeat angular-ngmodel ng-options
person Dan Forbes    schedule 03.10.2014    source источник
comment
Если вы собираетесь проголосовать против моего вопроса, было бы полезно, если бы вы хотя бы предоставили конструктивную критику о том, что я мог бы сделать, чтобы сделать его более полезным.   -  person Dan Forbes    schedule 03.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что основная проблема заключается в том, что вы, вероятно, хотите объявить selectedVals Array следующим образом:

$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 () {
      ...
    });
};
person Josep    schedule 03.10.2014
comment
@DanForbes нет проблем, но если можно: рассмотрите возможность создания службы для этих вызовов $http - person Josep; 03.10.2014
comment
Я ценю обратную связь. Почему ты это сказал? - person Dan Forbes; 03.10.2014
comment
@DanForbes упростит повторное использование, тестирование и поддержку вашего кода. - person Josep; 03.10.2014
comment
Это очень хорошая причина! Как вы, наверное, поняли из моего вопроса, на самом деле я не веб-разработчик. Я курирую службу разработчиков в своей компании, и мне было поручено создать веб-интерфейс, чтобы наши потребители могли использовать его для управления своей средой. Я тесно сотрудничаю с некоторыми людьми в моем офисе, которые являются более добросовестными веб-разработчиками. Я свяжусь с ними по поводу модуляризации функциональности моего веб-приложения. Спасибо еще раз! - person Dan Forbes; 03.10.2014