Question

我们正在使用ASP.NET MVC和AngularJS（Newbie on Angular），而且我真的坚持使用膨胀的HTML。

我有一堆单选按钮选项是真/假但是绑定到可空（bool？）

这下面的工作正常，但它有很多重复的代码。可以使用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>

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

使用指令可以使其更加紧凑和可重复使用。如果您愿意，请与我们联系。

Answer 2

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

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

» 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 the custom-directive不会更新ng-model： https://github.com/angular/angular.js/issues/1913

AngularJS - 循环中的单选按钮？

2 个答案:

» Demo on plunker

JS

HTML（index.html）

HTML（template.html）