javascript - 与 AngularJS 选择子对象的两种方式绑定(bind)

Question

我有一个带有此选择元素的 Angular 形式:

<select ng-model="expense.category" ng-options="category.code for category in categories"></select>

其中费用是我要在表单中创建/编辑的对象，费用.category 指向子对象类别(具有属性“id”和“code”)，该类别将由此控件选择。

这一切都非常适合创建新的支出 - 类别按照应有的方式保存。当加载费用进行编辑时，一切都很好 - 费用在 Controller 中有其类别。但是在表单上，​​尽管所有类别都已加载到选择元素中，但选择并未预先填充正确的类别条目，它是空的。因此，对于选择字段，绑定(bind)只能以一种方式(从表单到模型)起作用，而不能以另一种方式(从模型到表单)起作用。所有其他字段(费用属性)都已正确填写到编辑表单中。

有什么想法可以解决这个问题吗？

Answer 1

expense.category 模型必须是 categories 数组中的现有项目。

要实现这一点，您可以做的是在数组中搜索正确的项目(借助 code 属性)并将现有的类别副本替换为 类别中的引用 数组。

可以这样完成:

myApp.controller('ctrl', function($scope) {
    $scope.categories = [{code: 'sport'}, {code: 'music'}, {code: 'culture'}];
    $scope.expense = {category: {code: 'sport'}};

    function replaceWithReference(expense) {
        var code = expense.category.code;
        for(var i=0; i < $scope.categories.length; i++) {
            if($scope.categories[i].code === code) {
                expense.category = $scope.categories[i];
                return;
            }
        }
    }

    replaceWithReference($scope.expense);
});

这是工作 jsfiddle-demo