Question

我有以下角度形式，使用ng-if如果单击单选按钮时出现下拉菜单。当再次单击另一个单选按钮时，下拉列表将变为空白值，我希望它们返回“选择”选项。我该怎么做？

<form name="addToolForm" ng-submit="vm.addStuff()">
    <div layout="row" style="padding-left:30px">
        <md-radio-group name="firstCategory" ng-model="vm.firstCategory" layout="row" ng-required="true">
            <md-radio-button value="item1">item1</md-radio-button>
            <md-radio-button value="item2">item2</md-radio-button>
        </md-radio-group>
    </div>
    <br><br>
    <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item1'">
        <label class="col-xs-6 control-label">Sub Type:</label>
        <div class="col-xs-6">
            <select name="secondCategory" ng-model="vm.secondCategory" ng-dropdown required="true">
                <option value="" disabled selected>Choose</option>
                <option ng-option value="option1">option1</option>
                <option ng-option value="option2">option2</option>
            </select>
        </div>
    </div>
    <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item2'">
        <label class="col-xs-6 control-label">Sub Type:</label>
        <div class="col-xs-6">
            <select name="secondCategory" ng-model="vm.secondCategory" ng-dropdown required="true">
                <option value="" disabled selected>Choose</option>
                <option ng-option value="option1">option3</option>
                <option ng-option value="option2">option4</option>
            </select>
        </div>
    </div>
</form>

Answer 1

我认为您最好的选择是在vm.firstCategory上使用ng-change将vm.secondCatefory设置为空字符串，就像这样

＆＃13;

var myApp = angular.module('myApp', ['ngMaterial']).controller("MyCtrl", MyCtrl);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

}

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <div layout="row" style="padding-left:30px">
    <md-radio-group name="firstCategory" ng-model="vm.firstCategory" layout="row" ng-required="true" ng-change="vm.secondCategory = ''">
      <md-radio-button value="item1">item1</md-radio-button>
      <md-radio-button value="item2">item2</md-radio-button>
    </md-radio-group>
  </div>
  <br>
  <br>
  <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item1'">
    <label class="col-xs-6 control-label">Sub Type:</label>
    <div class="col-xs-6">
      <select name="secondCategory" ng-model="vm.secondCategory" ng-dropdown required="true">
        <option value="" disabled selected>Choose</option>
        <option ng-option value="option1">option1</option>
        <option ng-option value="option2">option2</option>
      </select>
    </div>
  </div>
  <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item2'">
    <label class="col-xs-6 control-label">Sub Type:</label>
    <div class="col-xs-6">
      <select name="secondCategory" ng-model="vm.secondCategory" ng-dropdown required="true">
        <option value="" disabled selected>Choose</option>
        <option ng-option value="option1">option3</option>
        <option ng-option value="option2">option4</option>
      </select>
    </div>
  </div>

</div>

＆＃13;

但是因为你正在使用ng-if dom元素会被删除，在这种情况下，它并不是一件坏事，因为这意味着你可以使用ng-init允许你在它所呈现的元素被渲染时设置一个值，所以将代码更改为下面的代码应该可以使它工作。

＆＃13;

var myApp = angular.module('myApp', ['ngMaterial']).controller("MyCtrl", MyCtrl);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  var vm = this;
}

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">


  <div layout="row" style="padding-left:30px">
    <md-radio-group name="firstCategory" ng-model="vm.firstCategory" layout="row" ng-required="true">
      <md-radio-button value="item1">item1</md-radio-button>
      <md-radio-button value="item2">item2</md-radio-button>
    </md-radio-group>
  </div>
  <br>
  <br>
  <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item1'">
    <label class="col-xs-6 control-label">Sub Type:</label>
    <div class="col-xs-6">
      <select name="secondCategory" ng-model="vm.secondCategory" ng-init="vm.secondCategory = ''" ng-dropdown required="true">
        <option value="" disabled selected>Choose</option>
        <option ng-option value="option1">option1</option>
        <option ng-option value="option2">option2</option>
      </select>
    </div>
  </div>
  <div class="col-xs-12" id="secondCategory" style="padding-left:30px" ng-if="vm.firstCategory == 'item2'">
    <label class="col-xs-6 control-label">Sub Type:</label>
    <div class="col-xs-6">
      <select name="secondCategory" ng-model="vm.secondCategory" ng-init="vm.secondCategory = ''" ng-dropdown required="true">
        <option value="" disabled selected>Choose</option>
        <option ng-option value="option1">option3</option>
        <option ng-option value="option2">option4</option>
      </select>
    </div>
  </div>

</div>

＆＃13;

下拉值不返回默认ng-if

1 个答案: