How do I define select option values in AngularJS

Question

...while maintaining model bindings?

I have a select menu like so:

<select class="form-control" ng-model="activeTask" ng-options="task.title for task in tasks"> </select>

That populates some text like so:

<span>{{activeTask.title}}</span>

The Projects resource grabs some json here (which is working fine):

function TimerCtrl($scope, Projects) {
    $scope.projects = Projects.get({}, {isArray:true}, function(projects) {
        $scope.tasks = $scope.projects[0].tasks;
        $scope.activeProject = $scope.projects[0];
        $scope.activeTask = $scope.tasks[0];
    });
}

This is the Projects service (which is working fine as well):

angular.module('projectServices', ['ngResource']).
factory('Projects', function($resource) {
    return $resource('data/projects.json', {}, {
        get: {method:'GET', isArray:true}
    });
});

and this is the JSON (which is also fine):

[
    {
        "title":"Chores",
        "url_title":"chores",
        "category":"Home",
        "tasks": [
            {"title":"Cleaning", "url_title":"cleaning"},
            {"title":"Yard Work", "url_title":"yard_work"},
            {"title":"Walking the Dogs", "url_title":"url_title"}
        ]
    },
    {
        "title":"Personal Website",
        "url_title":"personal_website",
        "category":"Work",
        "tasks": [
            {"title":"Design", "url_title":"design"},
            {"title":"Front End Dev", "url_title":"front_end_dev"},
            {"title":"Node Dev", "url_title":"node_dev"},
            {"title":"PHP Dev", "url_title":"php_dev"}
        ]
    }
]

Everything works fine with the numeric values that Angular automatically creates. My problem is...the values need to be the url-friendly string task.url_title but the option text should be task.title.

Any help would be greatly appreciated. I want to go drink a beer!

So, here's the solution I went with:

I used the task object itself as the value like so:

<select class="form-control" ng-model="activeTask" ng-options="task as task.title for task in tasks">

This allowed me to easily bind the span value to display the task title, not url_title:

<span>{{activeTask.title}}</span>

Thanks to @sza for his pointing me in the right direction. His suggestions are in the comments of the correct answer.

zs2020 · Accepted Answer · 2013-09-05 00:43:24Z

1

You can change the comprehension expression to

ng-options="task.url_title as task.title for task in tasks"

Working Demo

edited Sep 5, 2013 at 0:43

answered Sep 4, 2013 at 22:57

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

9 Comments

Jbird Over a year ago

I tried this previously (while reviewing the api docs) but the output does not change. It still shows the automatically generated integers as the value.

zs2020 Over a year ago

@Jbird Added a working demo for you. If you can't figure it out, then it got be something else.

Jbird Over a year ago

Angular is keeping track of the value but the actual value attribute still shows up as integers in your example. This is currently how the app is behaving. Also, the second challenge I mentioned is that I need the span to display the title, not the url_title.

zs2020 Over a year ago

@Jbird I have explained that many times in this site. That value doesn't matter. AngularJS manages the value in its self-contained scope. So what really matters is the model variable rather than the actually value in the html.

zs2020 Over a year ago

@Jbird Since you use AngularJS, why not just use it in proper way? AngularJS's self-contained scope encapsulated all the hassles for you and you should not worry about anything relating to HTML binding. It just works if you access any model from the scope. Does it make sense?

|

matsko · Accepted Answer · 2013-09-04 23:04:52Z

0

You need to use ng-options="...". Also use ng-model="..." or otherwise it won't work.

Here's the breakdown of it:

<select ng-options="ITEM.VALUE as ITEM.LABEL for ITEM in ITEMS" ng-model="val">
  <option>placeholder value which goes at the top of the element</option>
</select>

answered Sep 4, 2013 at 23:04

matsko

22.3k22 gold badges106 silver badges146 bronze badges

1 Comment

Jbird Over a year ago

I tried this previously (while reviewing the api docs) but the output does not change. It still shows the automatically generated integers as the value.

Collectives™ on Stack Overflow

How do I define select option values in AngularJS

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related