Question

我的select看起来像

   <select data-ng-model="transaction.category"
            class="form-control"
            data-ng-options="category.name group by category.parent for category in categories"
            required>
    </select>

transaction模型看起来像

$scope.transaction = {};

我设置了像

这样的值

var transaction = new Transaction();
transaction.name = $scope.transaction.name;
transaction.category = $scope.transaction.category.uuid;

categories看起来像

[  { 
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
 } ...
]

当我从下拉列表中选择值时，一切正常

那么问题是什么？
在某些情况下，我希望根据某些预先填充的用户首选项设置category

我该怎么办？
我做了以下

$scope.templateSelected = undefined;
$scope.$watch('templateSelected', function () {
    if ($scope.templateSelected !== undefined) {
        $scope.transaction.category = $scope.templateSelected.category;
    }
}, true);

我希望选择HTML选择元素上的值。但这不会发生

问题吗
如何根据select option更新我的$scope.templateSelected.category？

更新
Transaction看起来像

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}
        });
});

Answer 1

默认情况下，角度会根据对象参考跟踪<select>中选定的值。

在您设置$scope.transaction.category = $scope.templateSelected.category;时，列表中的$scope.transaction.category 不是对象。

您可以要求angular使用track by category.uuid根据属性识别所选值：

data-ng-options="category.name group by category.parent for category in categories track by category.uuid"

DEMO

AngularJS：在模型值更改时更新选择视图

1 个答案: