Question

我在Angular素材单选按钮中遇到问题当页面加载任何一个选项应该被选为默认值我正在尝试使用checked和aria-checked="true"但是它无法正常工作

<div class = "row radio">
        <md-radio-group ng-model="searchFlight.myVar">
          <md-radio-button  class="md-primary fix-width" value="OneWay">One-way</md-radio-button>
          <md-radio-button  class="md-primary fix-width"  value="RoundTrip">Round Trip </md-radio-button>
          <md-radio-button  class="md-primary fix-width"  value="MultyWay">Multi-Way + Hotal</md-radio-button>

        </md-radio-group>
    </div>

我有条件div的

<div class = "row Date" ng-switch="searchFlight.myVar">
            <div class = "col-lg-1"></div>
            <div class = "col-lg-11" ng-switch-default>
                  <div layout="column" class = "custom-date">
                    <label>Depart on</label>
                    <md-datepicker name="subDate" ng-model="searchFlight.submissionDate" md-placeholder="Pick a date" required ></md-datepicker>
                    <div class="validation-messages" ng-messages="searchFlight.subDate.$error">
                      <div ng-message="valid">The entered value is not a date!</div>
                      <div ng-message="required">This date is required!</div>
                    </div>
                  </div>
            </div>

            <div class = "col-lg-11" ng-switch-when="RoundTrip">
                  <div layout="column" class = "custom-date">   
                    <label>Depart on</label>
                    <md-datepicker ng-model="searchFlight.submissionDate" md-placeholder="Pick a date"></md-datepicker>
                  </div>

                  <div layout="column" class = "custom-date">
                    <label>Return on</label>
                    <md-datepicker ng-model="searchFlight.submissionReturnDate" md-placeholder="Pick a date" required></md-datepicker>
                    <div class="validation-messages" ng-messages="myForm.dateField.$error">
                      <div ng-message="valid">The entered value is not a date!</div>
                      <div ng-message="required">This date is required!</div>
                    </div>
                  </div>
            </div>
</div>

并且在我的控制器中我已经给出了类似

$scope.searchFlight = {
      myVar: 'OneWay'
    }

有任何暗示吗？我需要与控制器进行交互吗？

Answer 1

您应该为组设置ng-model，

 <md-radio-group ng-model="data.group1">

app.controller('mainCtrl', ['$scope',
  function($scope) {
    $scope.data = {
      group1: 'OneWay'
    };
  }
]);

<强> DEMO

angularjs材质单选按钮默认选择

1 个答案: