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"
Comments
Post a Comment