I am having a weird behavior.
In the view I have the follow code :
<div class="form-group">
<select class="form-control" name="name" id="repeatSelect" ng-model="selectedOption">
<option ng-repeat="o in availableOptions" value="{{o}}">{{o.name}}</option>
</select>
</div>
<p>{{selectedOption}}</p>
<p>{{selectedOption.value}}</p>
And in the controller I have :
$scope.availableOptions= [
{id: '1', name: 'name2', value:{w: 100, h: 250}},
{id: '2', name: 'name1', value:{w: 200, h: 100}},
];
$scope.selectedOption = $scope.availableOptions[1];
The problem is the follow : At first time the first two <p> (selectedOption and selectedOption.value) are showing right. However when I change the value of in the select only <p>{{selectedOption}}</p> is showed while <p>{{selectedOption.value}}</p> doesn't show anything.
Any help???
PD: with ng-option into select it worked, but why with ng-repeat not?
Only explanation I could think of was that it changes the object into a string. The work around you could do is creating ng-change="foo(selectedOption)" into the select and the function looking something like this:
$scope.foo = function(val){
$scope.selectedOption = angular.fromJson(val);
}
http://www.w3schools.com/tags/tag_option.asp from here we can confirm that the value is converted to string.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments