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>

但我不能让它发挥作用。

这是我的fiddle

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>

这是fiddle

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

将对象的键绑定到AngularJS

3 个答案: