Question

我是使用Angular.js的完全初学者，我在单选按钮情况下遇到数据绑定问题。相关的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>

和控制器是

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"
    },
]
}

如何使收音机列表中所选项目的名称属性进入＆＃34; selectedConfig＆＃34;宾语？我稍后引用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绑定：

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

那应该将item.item中的名称字符串绑定到您的范围selectedConfig

来自ng-repeat被称为item的对象的轻微混淆以及该集合中每个对象的第一个属性也称为item

更新：

从您提供的小提琴中，我有一个工作示例供您查看：

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>

Answer 2

请使用ng-repeat生成的所有输入字段使用不同的“name”属性。

如下所示：

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

请查看以下plnkr：http://plnkr.co/edit/RQQi5Fo9FzM409qKHwjG?p=preview

我希望这可以解决问题

AngularJS单选按钮没有绑定

2 个答案: