Question

我有一个带复选框的网页＆amp;嵌套ng-repeats中的单选按钮。当我单击复选框时，基础视图模型正在正确更新，但是当我单击单选按钮时，视图模型未正确更新。在组中，当我选择一个选项时，所选模型属性会更新为true，但另一个不会更改为false。

e.g。当我一个接一个地点击鸡的单选按钮时，所有这些都变成了现实。当我选择任何一个时，我希望其他的变得虚假

我的观点模型如下。

$scope.itemGroups = [{
        "name": 'Non Veg',
            "items": [{
            "selected": false,
                "name": 'Chicken',
                "Portions": [{
                "selected": false,
                    "name": '1 Cup'
            }, {
                "selected": false,
                    "name": '2 Cups'
            }, {
                "selected": false,
                    "name": '3 cups'
            }]
        }, {
            "selected": true,
                "name": 'Egg',
                "Portions": [{
                "selected": false,
                    "name": '1 Cup'
            }, {
                "selected": false,
                    "name": '2 Cups'
            }, {
                "selected": false,
                    "name": '3 cups'
            }]
        }]
    }, {
        "name": 'Veggie',
            "items": [{
            "selected": false,
                "name": 'Potato',
                "Portions": [{
                "selected": false,
                    "name": '1 Cup'
            }, {
                "selected": false,
                    "name": '2 Cups'
            }, {
                "selected": false,
                    "name": '3 cups'
            }]
        }, {
            "selected": false,
                "name": 'Tomato',
                "Portions": [{
                "selected": false,
                    "name": '1 Cup'
            }, {
                "selected": false,
                    "name": '2 Cups'
            }, {
                "selected": false,
                    "name": '3 cups'
            }]
        }]
    }];

我绑定到html的方式：

<div ng-repeat="itemGrp in itemGroups">
             <h1>{{itemGrp.name}}</h1>

            <div ng-repeat="item in itemGrp.items">
                <input type="checkbox" ng-model="item.selected" />{{item.name}}
                <label ng-repeat="portion in item.Portions">{{portion.name}}
                    <input type="radio" name="radio_{{itemGrp.name}}" ng-model="portion.selected" ng-value="true" />
                </label>
            </div>
        </div>

小提琴：http://jsfiddle.net/awqv0rb0/16/

你能指导一下这里可能出现的问题吗？有没有更好的方法来实现我在这里尝试做的事情？我需要遍历JSON并获取所选项的值。

Answer 1

您在此处发布的代码与您提供的小提琴不完全匹配，但您的问题是为每个单选按钮提供自己的名称，因此，它是自己的组。这允许所有单选按钮基本上用作复选框，并且全部设置为true而不是仅允许一个的所需行为。

相反，您应该为该项目下的所有单选按钮指定相同的组名称，例如：

name="{{item.name}}"

完成后，嵌套的ng-repeats看起来应该是这样的：

<div ng-repeat="item in itemGrp.items">
  <input type="checkbox" ng-model="item.selected" />{{item.name}}
  <label ng-repeat="portion in item.Portions">{{portion.name}}
    <input type="radio" name="{{item.name}}" ng-model="portion.selected" ng-value="true" />
  </label>
</div>

根据您的评论更新

要在更改每个部分时更新每个部分的selected:true值，您需要更多代码。这有点乱，所以它可能不是最好的解决方案 - 但我能够让它发挥作用。

除了ng-value="true"之外，您还应该在单选按钮上添加ng-change="toggleRadio(itemGrp,item,portion)"。在你的js中，你应该添加以下功能：

 $scope.toggleRadio = function(itemGrp, item, obj) {
      var indexOfItemGrp = $scope.itemGroups.indexOf(itemGrp);
      var indexOfItem = $scope.itemGroups[indexOfItemGrp].items.indexOf(item);
      var indexOfPortion = $scope.itemGroups[indexOfItemGrp].items[indexOfItem].Portions.indexOf(obj);
        angular.forEach($scope.itemGroups[indexOfItemGrp].items[indexOfItem].Portions, function(value,key)     {
            if(indexOfPortion != key) {
                value.selected = false;
            }
        });
    };

基本上，此代码将遍历itemGroup中项目内的所有部分选项，并将其值更新为false，除非它们是选定的选项。

您可以在我创建的原始小提琴的分支中看到一个工作示例：here。

再次更新

看一下这个问题：AngularJS Binding Radio Buttons To Booleans Across Multiple Objects。如果您可以更改json对象的模型，这可能是一个可行的解决方案。如果您无法更改模型，手动更新其他值是最干净的选择。

Answer 2

这是一个微不足道的问题。我也是，在早期阶段面对它。

如果您循环一组项目并且每个项目都有一组单选按钮，则给定项目的所有单选按钮必须具有“名称”属性值作为项目名称。

实施例。如果项目名称为“鸡”，则所有标记为“1杯”，“2杯”，“3杯”的单选按钮的名称应为“{{item.name}}”，即“鸡”。

代码中的更改点：

<input type="radio" name="{{item.name}}" ng-model="portion.selected" ng-value="true" />

以下是JSFiddle演示

单选按钮在嵌套的ng-repeats

2 个答案: