Question

我试图在我的应用程序中解决绑定问题。 Stackoverflow上存在类似的问题，但它们并未完全描述我的场景。

我有一个使用转发器创建的无线电组。每个style值都是对象，所以我使用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"})

使用Pure 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而不是魔术字符串。

将JSON对象绑定为AngularJS中的无线电数据

1 个答案:

使用下划线：

使用Pure JS：