javascript - 将对象的键绑定(bind)到 AngularJS 中的 radio 输入值

Question

我的 Controller 中有一个如下所示的对象:

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

我正在尝试动态创建 radio 输入，然后将输入的值绑定(bind)到对象的键。

我正在尝试这样的事情:

<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

您永远不会在 Controller 上定义您的模型。我已经更新了你的 fiddle :https://jsfiddle.net/Xsk5X/1380/

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

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

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

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

您的 html 现在正在使用新变量 colorsToBind , 并显示 value每个对象但绑定(bind)到 key每一个。