Question

我想用带角度和json的ng-repeats中的单选按钮替换标签。我显示了包含子产品的产品列表。我希望能够在每个子产品旁边放置一个单选按钮（例如Product1-Type1）并按父产品代码（例如Product1）对它们进行分组。如果用户选择子产品，则“Selected”值将为设置为 true ，其他子产品将设置为 false 。并且还调用displayFullPricing（价格）函数。

以下是用于显示json（工作）

的代码

<div ng-repeat="product in groups.Products">
<h3>{{product.Code}}</h3>
<div ng-repeat="prices in product.Prices">
    {{prices.Code }} - {{prices.monthly.RetailPrice}}
    <a ng-click="displayFullPricing(prices)">select</a>
</div>
</div>

我正在使用的json ......

{
"ID":"",
"Groups":[
    {
        "Products":[
            {
                "Code":"Product1",
                "Prices":[
                    {
                        "Code":"Product1-Type1",
                        "Monthly":{
                            "RetailPrice":2,
                            "MinimumPrice":4
                        },
                        "Selected":false
                    },
                    {
                        "Code":"Product1-Type2",
                        "Monthly":{
                            "RetailPrice":5,
                            "MinimumPrice":2
                        },
                        "Selected":false
                    }
                ]
            },
            {
                "Code":"Product2",
                "Prices":[
                    {
                        "Code":"Product2-Type1",
                        "Monthly":{
                            "RetailPrice":7,
                            "MinimumPrice":3
                        },
                        "Selected":false
                    },
                    {
                        "Code":"Product2-Type2",
                        "Monthly":{
                            "RetailPrice":2,
                            "MinimumPrice":8
                        },
                        "Selected":false
                    }
                ]
            }
        ]
    }
]
}

有人能帮助我实现这个目标吗？我曾尝试将ng-click移动到单选按钮但它没有用。非常感谢

Answer 1

以下是plunker。

关键是为广播组提供相同的名称，因此我使用其父产品给出了名称。

<input type="radio" name="group-{{product.Code}}" ng-model="subProduct.Selected">{{subProduct.Code}}

对于函数调用，您可以使用ng-click。

<input type="radio" ng-click="displayFullPricing()" name="group-{{product.Code}}" ng-model="subProduct.Selected">{{subProduct.Code}}

多个嵌套ng-repeats中的单选按钮（angular + JSON）

1 个答案: