Question

我有2个单选按钮。我想为每个单选按钮绑定不同的属性。例如：

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

radio foo有价值观＆＃34; id＆＃34; ：＆＃34; id1＆＃34;，＆＃34;值＆＃34; ：＆＃34; foo＆＃34;
无线电条的值为：＆＃34; id＆＃34; ：＆＃34; id2＆＃34;，＆＃34;价值＆＃34; ：＆＃34; bar＆＃34;

与<p>的绑定应该类似于：

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

导致＆＃34;所选广播的ID为id1，其值为foo＆＃34;

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-repeat中重复它们。

Answer 2

工作小提琴Here

＆＃13;

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

＆＃13;

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

＆＃13;

选择单选按钮时是否可以绑定不同的值？

2 个答案: