...while still maintaining the model bindings?
I currently have a select menu set up like this:
<select class="form-control" ng-model="activeTask" ng-options="task.title for task in tasks"> </select>When an option is selected, it displays some text like this:
<span>{{activeTask.title}}</span>The Projects resource fetches some JSON data (which is functioning correctly):
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 implementation (also working fine):
angular.module('projectServices', ['ngResource']).
factory('Projects', function($resource) {
return $resource('data/projects.json', {}, {
get: {method:'GET', isArray:true}
});
});
And here is the JSON data structure (all good as well):
[
{
"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 is functioning smoothly with the default numeric values generated by Angular. However, my challenge lies in needing the value to be the URL-friendly string task.url_title, while displaying the option text as task.title.
Any assistance on this matter would be highly appreciated. I could really use a beer right now!
So, here's the solution I implemented:
I opted to utilize the entire task object as the value like so:
<select class="form-control" ng-model="activeTask" ng-options="task as task.title for task in tasks">
This approach allowed me to easily bind the span element to display the task title, rather than the url_title:
<span>{{activeTask.title}}</span>
A special thanks goes out to @sza for guiding me in the right direction. His suggestions can be found in the comments section of the correct answer.