與AngularJS的雙向綁定為子對象選擇

Question

我有這個選擇元素的角度形式：

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

這里的費用是我要創建和編輯的對象，形式和費用。category指向子對象類別（具有屬性“ id”和“ code”），該類別將由此控件選擇。

所有這些都非常適合創建新費用-按應有的方式保存類別。 加載用於編輯所有內容的費用時，也可以-費用在控制器中具有其類別。 但是，盡管所有類別均已加載到select元素中，但在select表單上並沒有預先填充正確的類別條目，它為空。 因此，對於select字段，綁定只能以一種方式（從表單到模型）起作用，而不能以另一種方式（從模型到表單）起作用。 但是，所有其他字段（費用屬性）都正確地填寫到了編輯表單中。

任何想法如何解決這個問題？

Answer 1

ng-options和ng-model之間的比較是通過引用而非值來完成的。 我懷疑您的expense.category在加載時是與categories數組中的實體分開的實體。 您可能應該使用category的categories填充您的expense.category 。 另一個選擇是用下拉列表替換選擇。 這將代表更多的代碼（您必須在ng-click上自己處理綁定），但會為您提供更多的比較和顯示控制。

Answer 2

expense.category模型必須是categories數組中的現有項目。

要做到這一點，您可以做的是在數組中搜索正確的項（借助於code屬性），並用categories數組中的引用替換現有的副本 。

可以這樣完成：

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