将对象的键绑定到AngularJS中的无线电输入值

Question

我在控制器中有一个对象，如下所示：

$scope.colors = {
    green: "Green",
    yellow: "Yellow",
    red: "Red"
};

我正在尝试动态创建无线电输入，然后将输入值绑定到对象的密钥。

我正在尝试这样的事情：

<label ng-repeat="color in colors">{{color}}
<input type="radio" ng-model="model.color" name="name" ng-value="{{color}}" ng-change="test()" />
</label>

但我不能让它发挥作用。

这是我的小提琴

Answer 1

您永远不会在控制器上定义您的模型。 我已经更新了你的小提琴： https ： //jsfiddle.net/Xsk5X/1380/

  $scope.model = {"color":"test"};

我还添加了一个<span> ，它显示所选的颜色以显示它正在工作

我添加了一个新函数和变量 - $scope.createColors和$scope.colorsToBind 。

该函数将$scope.colors转换为仅包含对象键的数组，然后创建一个新的Objects数组，其中包含该颜色的键和值，但作为可访问的字段; 每个看起来都像{key:"green", value: "Green"} 。 一旦我们拥有了这些对象的数组，该函数就会将$scope.colorsToBind的值设置为该数组。

您的html现在使用新的变量colorsToBind ，并显示每个对象的value ，但绑定到每个对象的key 。

Answer 2

我设法提供了一个更清洁的解决方案。

<label ng-repeat="(key, value) in colors">
    <input type="radio" ng-model="model.color" name="name" ng-value="key" /> {{value}}
</label>

这是小提琴

Answer 3

你也可以这样做：

<label ng-repeat="color in colors">{{color}}
<input type="radio" ng-model="colors" name="name" value="{{color}}" ng-change="test()" />
</label>

$scope.test = function() {
   alert($scope.colors);
};

的jsfiddle