選擇單選按鈕時，可以綁定不同的值嗎？

Question

我有2個單選按鈕。我想爲每個單選按鈕綁定不同的屬性。例如：

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

• 無線電富具有值 「標識」： 「ID1」， 「值」： 「富」
• 無線電酒吧值： 「ID」： 「ID2」， 「價值」： 「酒吧」

而且到<p>的結合應該是這樣的：

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

在「結果選定無線電ID是ID1，和價值是FO 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：

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

你可以走得更遠了一步，創造無線電對象的數組，然後重複他們在一個NG-重複。

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>