How to bind select with existing model

Question

I have select with existing options, I need to bind values from select to my model.

What I do:

<select ng-model="site.id">
    <option value="1">First<option>
    <option value="2">Second<option>
</select>

Where my model is: user = ['name':'andry', 'site': {'id': 1, name: 'First'}]

I want to bind this select with my model. How is it possible? Currently after choosing value from select site id will be updated, but site name - not.

I'm newbie in angular.

Why would not you use ng-options? http://stackoverflow.com/questions/13047923/working-with-ng-options-in-angular http://docs.angularjs.org/api/ng.directive:select — Artyom Pranovich, Feb 12 '14 at 09:06
@ArtyomPranovich, actually, options rendered from server-side, so they are predefined. Is there way, how to get options from select? — uladzimir, Feb 12 '14 at 09:09

score 1 · Accepted Answer · answered Feb 12 '14 at 09:14

Please, for working with select, use ng-options:

View:

  <body ng-controller="MainCtrl">
    <h1>Select something below</h1>
    <select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
    <h3>The selected item:</h3>
    <pre>{{selectedItem}}</pre>
  </body>

Controller:

  $scope.items = [
    { id: 1, name: 'foo' },
    { id: 2, name: 'bar' },
    { id: 3, name: 'blah' }
  ];

And see next Plunker

$scope.selectedItem contain full object from $scope.items array.

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Use option with ng-repeat is also fine:

Assign model and value be object

<select ng-model="site">
    <option ng-repeat="item in items" value="{{item}}" 
            ng-selected="site === item">{{item.name}}<option>
</select>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 12 '14 at 09:22

Chen-Tsu Lin

22,876
16
53
63

Accepted answer looks more angularish. and I have prerendered options from server-side. – uladzimir Feb 12 '14 at 09:24

score 0 · Answer 3 · answered Feb 12 '14 at 09:04

0

You can use $watch function from angular

$scope.$watch("site.id", function(){
 var new_id = $scope.site.id;
 // so you now new id change site name
 $scope.site.name = "asdfasdfasdf"
});

Read this

answered Feb 12 '14 at 09:04

Farkhat Mikhalko

3,565
3
23
37

Thanks for your answers, one more question: how to get value from choosen option? – uladzimir Feb 12 '14 at 09:07
you can do it by access $scope, like in answer – Farkhat Mikhalko Feb 12 '14 at 09:08
options are pre-rendered from server-side, not with angular, is it possible to get options from select? – uladzimir Feb 12 '14 at 09:11
@FUserThrowError, please, add check on not 'undefined' for site.id in watcher :) – Artyom Pranovich Feb 12 '14 at 09:17
@FUserThrowError, Not exactly, what I'm looking for. – uladzimir Feb 12 '14 at 09:18
Maybe i don't understand the problem as i must )) Can you say what is problem)) We can solve it) – Farkhat Mikhalko Feb 12 '14 at 09:19
As I wrote before, options are pre-rendered from server-side, not with angular, so I need to know site.id and site.name? – uladzimir Feb 12 '14 at 09:23

How to bind select with existing model

3 Answers3

Use option with ng-repeat is also fine:

Assign model and value be object