AngularJS单选按钮绑定到多个对象布尔 [英] AngularJS binding radio buttons to booleans across multiple objects

问题描述

我试图绑定对象的数组组单选按钮组。我这有它产生的基础上的型号和pre-选择基于布尔选正确的单选按钮，但是我想不通组点如何切换绑定项的真假时，单选按钮值的值发生变化。基本上，我想这就像互相排斥的复选框的功能。我大概可以做到这一点实际的复选框，但很明显，单选按钮是理想的，因为这是他们预期的目的。

的jsfiddle为了您的方便： http://jsfiddle.net/uv9mwkwd/5/

HTML

 ＆LT; D​​IV NG-NG应用程序控制器=扩展＆GT;
    ＆LT; D​​IV NG重复=的PropertyGroup在propertyGroups＆GT;
        {{propertyGroup.label}}
        ＆LT; D​​IV NG重复=道具在propertyGroup.properties＆GT;
            ＆LT;输入类型=电台NG-模式=prop.selectedNAME =道具{{propertyGroup.alias}}NG值=真/＆GT; {{prop.value}}
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

脚本：

 功能扩展（$范围）{
  $ scope.propertyGroups = [
    {标签：房产1'，
     别名'：'property1'，
     属性：[{值：值1，选择：真正}，{值：'值2'，选择：假}]}，
    {标签：房产2'，
     别名'：'property2'，
     属性：[{值：值1，选择：假}，{值：'值2'，选择：真正}]}
  ];
    console.debug（$ scope.propertyGroups）;
}
 

解决方案

问题是你想单独连接选择值到每一个人的单选按钮的。相反，有这个模型中的一部分的PropertyGroup

的jsfiddle例如

  $ scope.propertyGroups = [
    {标号：'财产1'，
      别名：'property1'，
      选择：值1'，//＆LT; ----------这个店哪个值被选中
      属性：[{值：值1}，{值：'值2'}]}，
    {标号：'财产2'，
      别名：property2'，
      选择：值2'，//＆LT; ----------这个店哪个值被选中
      属性：[{值：值1}，{值：'值2'}]}
 

];

而在你的HTML，注意你的NG-模型，而不是看着单选按钮的整体组来匹配值

 ＆LT; D​​IV NG重复=道具在propertyGroup.properties＆GT;        {{propertyGroup.selected}}
        ＆LT;！ -  ^这只是这样你就可以看到它改变模型​​ - ＆GT;        ＆LT;输入类型=无线电
               NG-模式=propertyGroup.selected
               NAME =道具{{propertyGroup.alias}}
               NG-值=prop.value/＆GT; {{prop.value}}
    ＆LT; / DIV＆GT;
 

I am trying to bind an array of objects to sets of radio button groups. I have it to the point where it generates the groups based on the model and pre-selects the correct radio button based on the boolean selected, however I cannot figure out how to toggle the value of the bound item to true and false when the radio button value changes. Basically, I would like these to function like mutually exclusive checkboxes. I could probably do this with actual checkboxes, but obviously radio buttons are ideal, as this is their intended purpose.

JSFiddle for your convenience: 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>

Script:

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);
}

解决方案

The problem is you're trying to connect the "selected" value individually to each individual radio button. Instead, have this in the propertyGroup portion of your model.

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'}]}

];

While in your HTML, notice your ng-model is instead looking at the overall group of radio buttons to match the "value"

   <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>

这篇关于AngularJS单选按钮绑定到多个对象布尔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！