-1

As the title of my question implies, I am using Angular Bootstrap DualListbox inside an NgRepeat, but am not having any luck getting the NgModel to work properly. Let me try to mock up what I'm doing below...

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 />

My issue is that I cannot get $scope.selectedVals to pick up the selections from Angular Bootstrap DualListbox. My $scope.doStuff function is getting called with the thing.Name value passed properly, but I'm seeing an error in my console TypeError: Cannot read property 'Value' of undefined. Furthermore, I can observe through console logging that $scope.selectedVals is, in fact, empty.

I have a more or less identical set-up working in other parts of my web app, but it does not exist in an NgRepeat, so I have to assume that is the problem. Furthermore, I've seen some other posts about issues people have had with NgModel inside NgRepeat (see: here, here, here and here), but I can't really figure out how they relate to a solution to the particular problem that I'm having.

Can anyone point out what I'm doing wrong?

Community
  • 1
  • 1
Dan Forbes
  • 2,734
  • 3
  • 30
  • 60
  • If you're going to down-vote my question, it would be helpful if you could at least provide constructive criticism about what I could do to make it more useful. – Dan Forbes Oct 03 '14 at 14:57

1 Answers1

1

I'm guessing that the main problem is that you probably want to declare the selectedVals Array like this:

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

And use it like this in your view:

<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 />

And then your doStuff function should be something like this:

$scope.doStuff = function (aThing, selectedVal) {
  $http.post(aUrl, { thing: aThing, val = selectedVal)
    .success(function () {
      ...
    })
    .error(function () {
      ...
    });
};
Josep
  • 12,926
  • 2
  • 42
  • 45
  • 1
    @DanForbes no problem, but if I may: please consider creating a service for those $http calls – Josep Oct 03 '14 at 14:58
  • I appreciate the feedback. Why do you say that? – Dan Forbes Oct 03 '14 at 15:01
  • 1
    @DanForbes it will make your code easier to reuse, test and maintain – Josep Oct 03 '14 at 15:19
  • That is a very good reason! As you can probably tell from my question, I am not really a web developer. I curate a developer service at my company, and have been charged with creating a web front-end for our consumers to use to manage their environment. I am working closely with some people in my office who are more bona fide web developers. I will touch base w/ them about modularizing the functionality of my web app. Thanks again! – Dan Forbes Oct 03 '14 at 15:48