Bir radyo düğmesi seçerken farklı değerleri bağlamak mümkün mü?

Question

2 radyo düğmem var. Her radyo düğmesi için farklı özellikler bağlamak istiyorum. Örnek: "id1", "değer": "foo"

radyo çubuğu değerlere sahiptir: "id": "ID2", "değer"

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

• radyo foo değerlerini "id" vardır: "bar"

ve <p> bağlanma gereken bir şey gibi: "sonuçlanan

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

o fo olduğu için seçilen radyo için id id1 ve değer o "

Answer 1

Evet. Her radyo düğmesi için bir nesne oluşturabilir ve nesnelere kimlik ve değer özellikleri atayabilirsiniz.

Örnek: https://jsfiddle.net/x9nfke0d/

Açısal:

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: Sen bir adım öteye geçecek ve radyo nesneleri dizisi oluşturmak, sonra da Ng- bunları tekrar edebilir

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

tekrar et.

Answer 2

Çalışma Fiddle 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>