javascript - AngularJS 单选按钮没有绑定(bind)

Question

我完全是 Angular.js 的初学者，我遇到了单选按钮情况下的数据绑定(bind)问题。相关的 HTML 代码如下所示:

<label class="options_box" ng-repeat="item in item_config_list.item_config"> 
    <input type="radio" name="config" ng-model="selectedConfig" ng-value="item"> 
        {{ item.item }}
    </input>
</label>

Controller 是

App.controller('controller', function App ($scope, $http) {

    $.getJSON('res/prop/configs.json', function(data) {
    $scope.item_config_list = data;

});

json 文件如下所示:

{
    "item_config": [
    {
        "name": "Config1",
        "configNr": "1"
    },
    {
        "name": "Config2",
        "configNr": "2"
    },
]
}

如何使单选列表中所选项目的名称属性进入“selectedConfig”对象？我稍后会引用 selectedConfig 对象从后端获取数据。

我可能还要补充一点，单选按钮的复制是有效的——按钮的标签也是如此。它们被正确命名，只是没有将预期值赋予预期对象。

编辑:问题解决了!我将上面的 HTML 代码重构为

<label class="options_box" ng-repeat="item in item_config_list.item_config"> 
    <input type="radio" name="config" ng-model="$parent.selectedConfig" ng-value="item.name"> 
        {{ item.name }}
    </input>
</label>

Answer 1

我认为您只需要更改 ng-value 绑定(bind):

<input type="radio" name="config" ng-model="selectedConfig" ng-value="item.item"> 
    {{ item.item }}
</input>

然后应该将 item.item 中的名称字符串绑定(bind)到范围的 selectedConfig

您的 ng-repeat 对象被称为 item 并且该集合中每个对象的第一个属性也称为 item/p>

更新:

根据您提供的 fiddle ，我有一个工作示例供您查看:

https://jsfiddle.net/sc622go8/

根本问题是 ng-repeat 创建了一个子作用域，因此要引用 selectedConfig 变量，您需要使用 $parent.selectedConfig :

<input type="radio" name="config" ng-model="$parent.selectedConfig" ng-value="item.item"> 
    {{ item.item }}
</input>