javascript - How do I define select option values in AngularJS -


...while maintaining model bindings?

i have select menu so:

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

that populates text so:

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

the projects resource grabs json here (which 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 projects service (which working fine well):

angular.module('projectservices', ['ngresource']). factory('projects', function($resource) {     return $resource('data/projects.json', {}, {         get: {method:'get', isarray:true}     }); }); 

and json (which fine):

[     {         "title":"chores",         "url_title":"chores",         "category":"home",         "tasks": [             {"title":"cleaning", "url_title":"cleaning"},             {"title":"yard work", "url_title":"yard_work"},             {"title":"walking 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 numeric values angular automatically creates. problem is...the values need url-friendly string task.url_title option text should task.title.

any appreciated. want go drink beer!

so, here's solution went with:

i used task object value so:

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

this allowed me bind span value display task title, not url_title:

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

thanks @sza pointing me in right direction. suggestions in comments of correct answer.

you can change comprehension expression to

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

working demo


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -