在AngularJS中將JSON對象綁定為廣播數據

Question

我正在嘗試解決應用程序中的綁定問題。 Stackoverflow上也存在類似的問題，但它們並未完全描述我的情況。

我有一個使用中繼器創建的廣播組。 每個style值都是Object，因此我使用ng-value指令將其正確綁定

        <label ng-repeat="style in styles">
            <input type="radio" ng-model="formData.style" ng-value="style">
            {{style.name}}
        </label>

我的控制器邏輯非常簡單：

var first = {
   name: "First Name",
   value: "First Value"
};

var second = {
   name: "Second Name",
   value: "Second Value"
};

var third = {
   name: "Third Name",
   value: "Third Value"
};

$scope.styles = [first, second, third];

$scope.formData = {};

//this code works and my screen shows 'second' as selected option
$scope.formData.style = second; 

//this code do not works and my screen do not show 'Second name' as selected
//$scope.formData.style = { 
//       name: "Second Name",
//       value: "Second Value"
//    };

此代碼按預期方式工作。 我正在設置選擇，並且表單顯示選定的選項。

但是在我的特定示例中，我沒有引用second值，因此我需要從第三個控件中獲取此數據，因此更新后的代碼如下所示：

$scope.formData.style = {
   name: "Second Name",
   value: "Second Value"
};

而且這種行為不起作用-我在屏幕上看不到收音機選擇。

這是我的小提琴https://jsfiddle.net/vadimb/L7uw3oos/3/

Answer 1

這是因為您將單選按鈕綁定到模型$scope.formData.style的確切屬性 ，在第一個示例中，該屬性設置為second ，這是$scope.styles數組中的一項。

將單選按鈕綁定到新對象時：

$scope.formData.style = {
    name: "Second Name",
    value: "Second Value"
};

您沒有將其綁定到$scope.styles數組中的對象，而$scope.formData.style現在是它自己的完全獨立的對象。

如果要動態設置，則必須在$scope.styles查找所需的項。

使用下划線：

$scope.formData.style = _.findWhere($scope.styles, { name: "Second Name"})

使用純JS：

function getFromArray(array, value) {
    for(var i = 0; i < array.length; i++) {
        if (array[i].name.toLowerCase() == value.toLowerCase()) {
            return array[i];
        }
    }
}

$scope.formData.style = getFromArray($scope.styles, "Second Name");

盡管我建議您使用某種Id代替魔術字符串。