Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-model and ng-options not matching up?

I have a method in my resources object that comes in as:

resources.type

otherstuff: 'more strings'
type:'specifictype'
morestuff: 'morestuff'

The user can change this type with a dropdown / through another call that gets a list of all possible types which looks like resourceList.types which has a list of objects like this json

types:
     [
         {name:'resourcetype1'}, 
         {name:'resourcetype2'},
         etc...
     ],

my html looks like:

<select ng-model="resources.type" ng-options="name.name for name in resourceList.types">
</select>

The select/drop down box populates with my resourceList.type stuff but when the page loads the ng-model doesn't set to the already selected resource type. It actually selects a blank entry at the top of the drop down when you click. Is angular picky about this? How can I get the ng-model to behave the way I want it to?

I tried messing around with ng-options with the different ways of getting the repeat but I feel like this is more how angular connects the model. Does it just match the string to the ng-options list?

Here's the plnkr as you can see it's not defaulting to type1

http://plnkr.co/edit/NyWACtFQuyndR6CG8lpN?p=info

like image 332
Garuuk Avatar asked Jul 22 '14 22:07

Garuuk


People also ask

What is the difference between Ng-options and Ng-repeat?

ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.

What is the difference between ng-model and data NG model?

For AngularJS there is no difference between ng-app and data-ng-app or ng-controller and data-ng-controller or ng-model and data-ng-model because while compiling HTML page, AngularJS strips data- or x- prefix.

Does Ng-change require NG-model?

The ng-change directive requires a ng-model directive to be present. The ng-change directive from AngularJS will not override the element's original onchange event, both the ng-change expression and the original onchange event will be executed.

What is difference between ng-model and Ng bind directive?

ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable. Save this answer.


1 Answers

In Angular, the model is the single source of truth.
This means that if you want a value selected (and bound to your ngModel) you need to assign it to the model:

<select ng-model="resources.type"
        ng-options="type.name as type.name for type in resourceList.types">
</select>

$scope.resources = {...};
$scope.resourceList = {
    ...
    types: [
        {name: 'resourcetype1'}, 
        {name: 'resourcetype2'},
        ...
    ]
};

// Set the model to the desired value
$scope.resources.type = $scope.resourceList.types[0].name;

See, also, this short demo.

like image 95
gkalpak Avatar answered Oct 05 '22 17:10

gkalpak