ラジオボタンを選択するときに異なる値をバインドすることはできますか？

Question

2つのラジオボタンがあります。私はラジオボタンごとに異なる属性をバインドしたいと思います。例えば：

<label> 
    Foo 
    <input type="radio" name="test" value="foo"/> 
</label> 
<label> 
    Bar 
    <input type="radio" name="test" value="bar"/> 
</label> 

• 無線fooが値 "ID" を有する： "ID1"、 "値"： "FOO"
• 無線バーは値を持っている： "ID"： "ID2"、 "値"： 「バー」

そして<p>への結合は、のようなものでなければなりません：

選択した無線用IDがID1であり、それの値がFOである」の結果の

<p>The id for selected radio is {{ radio.id }}, and value for it is {{ radio.value }}</p> 

o "

Answer 1

はい。ラジオボタンごとにオブジェクトを作成し、オブジェクトにidプロパティとvalueプロパティを割り当てることができます。

例：https://jsfiddle.net/x9nfke0d/

角度：

function Controller() { 
    var vm = this; 

    vm.selected_radio = null; 
    vm.foo = { 
     id: 1, 
     value: 'Foo' 
    }; 
    vm.bar = { 
     id: 2, 
     value: 'Bar' 
    }; 
    vm.setRadio = setRadio; 

    function setRadio(obj) { 
     vm.selected_radio = obj; 
    } 
} 

HTML：あなたはさらに一歩進み、ラジオオブジェクトの配列を作成し、その後、ng-でそれらを繰り返すことができ

<label> 
    Foo 
    <input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.foo)"> 
</label> 
<label> 
    Bar 
    <input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.bar)"> 
</label> 

繰り返す。

Answer 2

ワーキングフィドルHere

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.foo = {bar:"foo"}; 
 
}]);

<section ng-controller="MyCtrl"> 
 
{{foo.bar}} 
 
<label>Foo<input ng-model="foo.bar" type="radio" name="test" value="foo"/></label> 
 
<label>Bar<input ng-model="foo.bar" type="radio" name="test" value="bar"/></label> 
 
</section>