My select element is structured as follows:
<select data-ng-model="transaction.category"
class="form-control"
data-ng-options="category.name group by category.parent for category in categories"
required>
</select>
The model transaction is initialized like this:
$scope.transaction = {};
To set values, I use the following syntax:
var transaction = new Transaction();
transaction.name = $scope.transaction.name;
transaction.category = $scope.transaction.category.uuid;
This is how the categories are structured:
[ {
name: Alcohol & Bars
parent: Food & Drink
uri: /categories/9b1e97f2-ac7d-4caf-85fc-476cd97dd6cb
uuid: 9b1e97f2-ac7d-4caf-85fc-476cd97dd6cb
} , {
name: Coffee & Tea
parent: Food & Drink
uri: /categories/cf040e77-2faa-41de-b9f7-3749a42735ac
uuid: cf040e77-2faa-41de-b9f7-3749a42735ac
} ...
]
Although everything works fine when selecting a value from the drop-down, there is an issue that arises.
What seems to be the problem?
In certain scenarios, I need to set the category based on user preferences that have been pre-populated.
How do I tackle this situation?
I implement the following code snippet:
$scope.templateSelected = undefined;
$scope.$watch('templateSelected', function () {
if ($scope.templateSelected !== undefined) {
$scope.transaction.category = $scope.templateSelected.category;
}
}, true);
Expecting the HTML select options to be automatically selected, but unfortunately, this does not happen as anticipated.
So, what's the question here?
How can I update my select option based on $scope.templateSelected.category?
UPDATE:
The structure of Transaction is defined within AngularJS like this:
angular.module('transactionService', ['ngResource']).factory('Transaction', function ($resource) {
return $resource('/user/transactions/:transactionId',
{transactionId: '@uuid'},
{
getRecent: {method: 'GET', params: {recent: true}, isArray: true},
getForYearMonth: {method: 'GET', params: {}, isArray: true}
});
});