CODEWITHSUNDEEP
angularjsangular-ui
Chris
Chris

Reputation: 591

angularjs scoping in a modal window

I created a plunker at http://plnkr.co/edit/AQl49R?p=preview which demonstrates an issue I am having.

When you click "open" it launches a modal window. Click "xx" and it shows the id for the element that is selected in the select2 select box. Change the selected element in select2. It will update on the screen, but when you click "xx" it does not seem to be refreshing to show the new id. It looks like a scoping issue to me - but I am not sure what else I need to do.

Upvotes: 0

Views: 256

Answers (2)

Foo L
Foo L

Reputation: 11137

Select2 is creating its own scope, so when you choose an item, it only affects the $scope.chosenItem in the select2.

What you need to do is create a hash/Object to hold the chosenItem:

In app.js:

$scope.foo = {};
$scope.foo.chosenItem = { id: 3, text: "bamboo" };

In index.html:

<input type="hidden" ui-select2="select2ConfigCustomer" ng-model="foo.chosenItem">

Children scopes cannot change the parents' scope variables directly, but they can change values inside a hash/Object.

Upvotes: 1

Deividi Cavarzan
Deividi Cavarzan

Reputation: 10110

You need to change your ng-model to an object.

 $scope.items = {};
 // or $scope.items = [];
 $scope.items.chosenItem = { id: 3, text: "bamboo" };

And in the HTML:

<input type="hidden" ui-select2="select2ConfigCustomer" style="width: 200px" placeholder="All" ng-model="items.chosenItem">

Here's an updated Plunker.

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

Upvotes: 3

Related Questions