AngularJS - 循环中的单选按钮？答案

【问题标题】：AngularJS - Radio buttons in a loop?AngularJS - 循环中的单选按钮？
【发布时间】：2014-08-15 02:12:24
【问题描述】：

我们正在使用 ASP.NET MVC 和 AngularJS（Angular 上的新手），我真的被臃肿的 html 卡住了。

我有一堆单选按钮选项，它们是真/假，但绑定到可为空的（布尔？）

这在下面工作得很好，但它有很多重复的代码。可以使用 Angular 的奇迹来缩小它吗？（我们将有很多此类是/否/否选择控件）

        <div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
            <input type="radio"
                   name="@(Html.NameFor(x => x.IsUSAResident))"
                   id="resTrue"
                   ng-value="true"
                   required
                   ng-model="model.IsUSAResident">
            <label for="resTrue" class="pull-left">Yes</label>
        </div>
        <div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
            <input type="radio"
                   name="@(Html.NameFor(x => x.IsUSAResident))"
                   id="resFalse"
                   ng-value="false"
                   required
                   ng-model="model.IsUSAResident">

            <label for="resFalse" class="pull-left">No</label>
        </div>

【问题讨论】：

标签： asp.net-mvc angularjs angularjs-directive

【解决方案1】：

是的，您可以使用ng-repeat 缩小它：

<div ng-init="options = [{id:'resTrue',value:true,label:'Yes'},{id:'resFalse',value:false,label:'No'}]">
    <div ng-repeat="option in options"
        class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
            <input type="radio"
                   name="@(Html.NameFor(x => x.IsUSAResident))"
                   id="{{option.id}}"
                   ng-value="option.value"
                   required
                   ng-model="model.IsUSAResident">
               <label for="{{option.id}}" class="pull-left">{{option.label}}</label>
    </div>
</div>

有一些方法可以进一步改进此代码。一种是创建一个控制器来保存选项（摆脱ng-init）：

angular.module('myApp')
.controller('yesNoRadioCtrl',function($scope){
    $scope.options = [
        {id:'resTrue', value:true, label: 'Yes'},
        {id:'resFalse', value:false, label: 'No'}
    ];
});

对应的标记：

<div ng-controller="yesNoRadioCtrl">
    <div ng-repeat="option in options"
        class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
            <input type="radio"
                   name="@(Html.NameFor(x => x.IsUSAResident))"
                   id="{{option.id}}"
                   ng-value="option.value"
                   required
                   ng-model="model.IsUSAResident">
               <label for="{{option.id}}" class="pull-left">{{option.label}}</label>
    </div>
</div>

这可以通过指令变得更加紧凑和可重用。如果你想看，请告诉我。

【讨论】：

【解决方案2】：

乔纳森是对的。您可以节省一些空间，只需 ng-repeat'ing 您的无线电输入。

以下是您可以使用更小的代码创建自己的指令并实现更多无线电输入的方法：

» Demo on plunker

JS

angular.module('foobar', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.zuzu = "a value";
  
    $scope.bars = [
      {id:"one"},
      {id:"two"}, 
      {id:"three"}
    ];
  
    for(i=0;i<$scope.bars.length;i++) {
      $scope.bars[i]["name"] = 'just-a-radio-group';
    }
  }])
  .directive('myRadio', function() {
    return {
      restrict: 'E',
      scope: {
        data: '=',
        ngModel: '=ngModel'
      },
      templateUrl: 'template.html'
    };
  });

HTML (index.html)

<body ng-app="foobar">  
  <div ng-controller="Controller">
    <h3>{{zuzu}}</h3>
    <!-- they won't update the scope -->
    <my-radio ng-repeat="bar in bars" ng-model="zuzu" data="bar"></my-radio>

    <!-- they will update the scope -->
    <my-radio ng-model="zuzu" data="bars[0]"></my-radio>
    <my-radio ng-model="zuzu" data="bars[1]"></my-radio>
    <my-radio ng-model="zuzu" data="bars[2]"></my-radio>
  </div>
</body>

HTML (template.html)

<div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
    <input type="radio"
           name="data.name"
           id="data.id"
           ng-value="data.id"
           required
           ng-model="ngModel">
         
    <label for="data.name"
           class="pull-left"
           >
               {{data.id}}
           </label>
</div>

附加说明，为什么 ng-repeating 自定义指令不会更新 ng-model： https://github.com/angular/angular.js/issues/1913

【讨论】：