Ng-options doesn't apply value when selecting an element

Question

I have some values saved in ng-options , when you selec the element it doesn't give the proper value to the box, I want to change height and width of that element using <option> element.

My HTML:

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select
                ng-options="p.first + ' x ' + p.last for p in people"
                ng-model="selectedPerson"></select>

        {{ selectedPerson.first }} x {{ selectedPerson.last }}
    </fieldset>

    <div class="box" ng-style="{'width' : selectedPerson.first}">

    </div>
</div>

The JS:

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.people = [
        { id: 1, first: 100, last: 200 },
        { id: 2, first: 200, last: 300 },
        { id: 3, first: 300, last: 400 },
        { id: 4, first: 400, last: 500 }
    ];
});

A Fiddle used for the example: http://jsfiddle.net/a6p1fL7m/

Please go through the link http://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options , it helps to solve your problem — Geo Jacob, Oct 22 '14 at 17:59
Make sure your ng-style="{'width' : selectedPerson.first}" should come under controller element — Geo Jacob, Oct 22 '14 at 18:01

score 1 · Accepted Answer · answered Oct 22 '14 at 17:58

Since you have a controller on your fieldset, it has a separate scope that is unavailable to it's siblings. For example if you put the div inside your fieldset, and add 'px' to the width it works (fiddle):

<fieldset ng-controller="FirstCtrl">
    <select
            ng-options="p.first + ' x ' + p.last for p in people"
            ng-model="selectedPerson"></select>

    {{ selectedPerson.first }} x {{ selectedPerson.last }}
    <div class="box" ng-style="{'width' : selectedPerson.first + 'px'}">
      selectedPerson: {{selectedPerson|json}}
    </div>
</fieldset>

I always find it handy for debugging to throw the value in there with the | json filter to make sure the value is correct where I think it should be. You can also use the AngularJS Batarang chrome extension to help debug your scopes.

Thank you very much, this works and fits my neeeds! Sometimes is hard to figure out what is the proper scope. Thanks again! — Alex, Oct 22 '14 at 18:05

Ng-options doesn't apply value when selecting an element

1 Answers1