ng-repeat scope output problem

[kgividen]

If you have two hardcoded isteven-multi-select boxes it works as you'd expect. However, when you use an ng-repeat to display them seems to break and won't update the output. Haven't figured out why this is yet...

Here's a plunker showing the cases. http://plnkr.co/edit/lEk7GPypGoDQAQ62OlfC?p=preview

[kgividen]

Actually the new 4.0 Beta seems to take care of this issue. It doesn't necessarily update the output but it does update the input correctly.

Thanks!

http://plnkr.co/edit/xPa53wnHZSN5lRUjjUAK?p=preview

[isteven]

Hi @kgividen ,

You should use different $scope variables for the output, or else both directives will dump output into the same variable.

Take note that output-model is always refreshed, means you can't use the same output-model to "combine" multiple data from two or more directives.

[kgividen]

Yea, I knew that but the output is still a problem even if there are different scoped variables. On 4.0 I ended up not even using the output and just used the changed input but this still might be an issue on 4.0. See the updated plunkers and you'll see the output doesn't work when it is in the ng-repeat whether it's 3.0 or 4.0.

[isteven]

Hi @kgividen ,

I did a quick look, and something is indeed happening. I suspect this is because of the fact that AngularJS creates new scope for each ng-repeat iteration.. Somehow it doesn't really work well on the newArray3 there.

I'm quite sure my output logic is right - you can try to open the JS code, find the function "refreshOutputModel", and do simple console.log( $scope.outputModel ) just before the end of the function. You'll see that the output model is refresh properly.

I'll see what I can do in a few days.

[kgividen]

Yea...I think there is something to the scope and ng-repeat.

I was looking at: https://github.com/angular/angular.js/wiki/Understanding-Scopes

But it's going to take me a bit of time to consume that and understand what exactly is going on. But it seems they are related.

[kgividen]

Yea...it looks like that's the issue. If I change it to an object with an array beneath it works. So once we understand that article I think we can fix it.

I updated the plunker to reflect the change but basically it's like this:

$scope.newArray3 = {}; $scope.newArray3.blah = []; <div ng-repeat="group in groupArray"> <div isteven-multi-select input-model="group.suites" output-model="newArray3.blah" button-label="icon name" item-label="icon name maker" tick-property="ticked" > </div> </div>

[isteven]

Hi @kgividen,

Glad to know you found a working solution. I am changing the post title (simplify it a bit) to reflect the origin of the problem. This will be a good reference for everyone else. Cheers.

[DevankAgarwal]

Hey, any progress on this...?

[isteven]

@DevankAgarwal ,

Unfortunately no progress as of now, and I don't have any timeline either.

[midgen]

Here's a plunkr with the issue I'm seeing (changes applied to all ng-repeat child models). I'll have a crack at a solution but I'm no JS pro, don't hold your breath :)

https://plnkr.co/edit/Ju5LzKKHNoTF8Rw4Tyyh?p=preview

[midgen]

Updated plunker with a quick and dirty fix. I've just taken a deep copy of the inputModel called workingModel for each instance to work on, rather than them all sharing the same reference which was causing the actions to be duplicatd. The directive now plays nice in an ng-repeat.

I'm not a JS programmer by trade so this may be an awful hack, but feel free to take a look

https://plnkr.co/edit/Ju5LzKKHNoTF8Rw4Tyyh?p=preview

[umairhm]

@midgen: Your solution seems to serve the cause perfectly. Thanks

[TomVanHaver]

Hi,

I face a (i suspect) similar problem: The directive is setup in a repeater. Changing one select value changes the input model (so all directives in the repeater reflect the same change)

The problem is fixed with midgen's post.

@isteven : do you know when there will be a new release with this fix? Or am i implementing it wrong?

[tezcane]

@midgen this fixes the problem in having multiple multi-selects in an ng-repeat; however, dynamic updating of the inputModel, no longer works: http://isteven.github.io/angular-multi-select/#/demo-dynamic-update

I'm looking for a way to do both...

[tezcane]

I found a way to use the default v4.0.0 code to work without needing midgen's workaround. With below you can have multiple multi-selects in an ng-repeat and also have dynamic updates to each one:

In controller make your array look like this: inputModelArray = [ { needed: [ {name:"n1"}, {name:"n2} ] }, { needed: [ {name:"n1"}, {name:"n2} ] }, ];

html inside ng-repeat: input-model="inputModelArray[$index].needed"