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

我猜你的主要问题是你可能想要像这样声明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 () {
      ...
    });
};

带有Angular Bootstrap DualListbox的NgRepeat内部的NgModel

1 个答案: