AngularJS 将单选按钮绑定到多个对象的布尔值

Question

我正在尝试将一组对象绑定到一组单选按钮组。我已经到了它基于模型生成组并根据布尔值selected 预先选择正确的单选按钮的地步，但是我无法弄清楚如何将绑定项目的值切换为 true 和 false 时单选按钮值更改。基本上，我希望这些功能类似于互斥复选框。我可能可以用实际的复选框来做到这一点，但显然单选按钮是理想的，因为这是它们的预期目的。

JSFiddle 为您提供方便：http://jsfiddle.net/uv9mwkwd/5/

HTML：

<div ng-app ng-controller="Extensions">
    <div ng-repeat="propertyGroup in propertyGroups">
        {{propertyGroup.label}}
        <div ng-repeat="prop in propertyGroup.properties">
            <input type="radio" ng-model="prop.selected" name="prop{{propertyGroup.alias}}" ng-value="true" /> {{prop.value}}
        </div>
    </div>
</div>

脚本：

function Extensions($scope) {
  $scope.propertyGroups = [
    {'label': 'Property 1',
     'alias': 'property1',
     'properties': [{value: 'Value 1', selected: true},{value: 'Value 2', selected: false}]},
    {'label': 'Property 2',
     'alias': 'property2',
     'properties': [{value: 'Value 1', selected: false},{value: 'Value 2', selected: true}]}
  ];
    console.debug($scope.propertyGroups);
}

Answer 1

问题是您试图将“选定”值单独连接到每个单独的单选按钮。相反，将其放在模型的 propertyGroup 部分。

jsFiddle example

$scope.propertyGroups = [
    { label : 'Property 1',
      alias : 'property1',
      selected : 'Value 1', // <---------- this stores which value is checked
      properties: [{value: 'Value 1'},{value: 'Value 2'}]},
    { label : 'Property 2',
      alias : 'property2',
      selected : 'Value 2', // <---------- this stores which value is checked
      properties : [{value: 'Value 1'},{value: 'Value 2'}]}

];

在您的 HTML 中，请注意您的 ng-model 正在查看单选按钮的整体 group 以匹配“值”

   <div ng-repeat="prop in propertyGroup.properties">

        {{ propertyGroup.selected }} 
        <!-- ^ this is just so you can see it change the model-->

        <input type="radio" 
               ng-model="propertyGroup.selected" 
               name="prop{{propertyGroup.alias}}" 
               ng-value="prop.value" /> {{prop.value}}
    </div>