Können bei der Auswahl eines Optionsfelds unterschiedliche Werte gebunden werden?

Question

Ich habe 2 Radiobuttons. Ich möchte verschiedene Attribute für jedes Optionsfeld binden. Beispiel:

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

• radio foo hat Werte "id": "ID1", "Wert": "foo"
• Funk bar hat Werte: "id": "ID2", "Wert": „bar“

und die Bindung sollte auf eine <p> so etwas wie:

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

Resultierende in „die ID für ausgewählte Radio ist id1 und Wert für sie fo o "

Answer 1

Ja. Sie können für jede Optionsschaltfläche ein Objekt erstellen und den Objekten ID- und Werteigenschaften zuweisen.

Beispiel: https://jsfiddle.net/x9nfke0d/

Eckig:

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:

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

Sie weiterhin einen Schritt gehen und eine Reihe von Radio-Objekte erstellen, dann wiederholen sie in einem ng- wiederholen.

Answer 2

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