Angular js select ng-model binding

Question

i have a big problem with angularjs. Here is my code:

Controller:

function testCt($scope){
    $scope.types = [
        {name:'fruit',label:'To Fruit'},
        {name:'meat',label:'To Meat'},
        {name:'other',label:'To Other'}
    ];

    $scope.foods = [
        {name:'apple',type:'fruit'},
        {name:'raptor',type:'meat'}
    ];

    $scope.selected = null;
    $scope.selectFood = function(food) {
        $scope.selected = food;
    }
};

And the view:

<div ng-app ng-controller="testCt">
    <ul>
        <li ng-repeat="food in foods" ng-click="selectFood(food)">
            {{food.name}}
        </li>
    </ul>
    <select data-ng-model='selected' data-ng-options='t.name as t.label for t in types'></select>
    <br>
    {{selected.name}} <br> {{selected.type}}
</div>

The problem is, the angular js not binding to select element the food what i clicked. Here is the fiddle: http://jsfiddle.net/p7JJs/

When i choose one food from list, the select element not bind to type. Thank for help :)

nilsK · Accepted Answer · 2014-04-24 10:32:22Z

3

try this:

data-ng-options="t as t.label for t in types"

fiddle

you have to set t as reference, not t.name (no attributes name or type in t.name)

answered Apr 24, 2014 at 10:32

nilsK

4,3512 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

3k- · Accepted Answer · 2014-04-24 10:46:51Z

0

Did you try ngSelected? Here're the docs:

https://docs.angularjs.org/api/ng/directive/ngSelected

answered Apr 24, 2014 at 10:46

3k-

2,5932 gold badges25 silver badges25 bronze badges

Comments

slavoo · Accepted Answer · 2014-04-25 05:17:51Z

0

Try this:

Change Your controller function

From

   $scope.selectFood = function(food) {
   $scope.selected = food;
   }

To

   $scope.selectFood = function(food) {
   $scope.selected = food.type;
   }

It will work..

edited Apr 25, 2014 at 5:17

slavoo

6,11464 gold badges40 silver badges41 bronze badges

answered Apr 24, 2014 at 10:43

user3568303

1024 bronze badges

1 Comment

nilsK Over a year ago

no it wont work :p (no access to selected.name for example ...)

Collectives™ on Stack Overflow

Angular js select ng-model binding

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related