Question

如何在点击按钮时重置下拉菜单？

<select class="form-control" ng-model="Software" ng-options="o as o for o in Softwares" id="softId" onChange="onSelectFilter()">
    <option value=''>--- Software ---</option>
</select>
<button id="resetDd" class="btn btn-default">GO</button>

app.controller('TechCtrl', function($scope) {
    $scope.Softwares = [ "Word", "Excel", "PowerPoint", "Publisher", "Access", "Paint", "Movie maker" ];
});

我想在刷新页面时这样做。我怎么能这样做？

Answer 1

ngModel指令使用NgModelController将输入，select，textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由此指令创建并公开。 [Ref ]

要重置select input的值，请重置模型Software的值。 select的初始值为''因此要重置它，需要将scope变量设置为''

试试这个：

＆＃13;

var app = angular.module('app', []);

app.controller('TechCtrl', TechCtrl);

function TechCtrl($scope) {
  $scope.Softwares = ["Word", "Excel", "PowerPoint", "Publisher", "Access", "Paint", "Movie maker"];
  $scope.reset = function() {
    $scope.Software = '';
  }
  $scope.onSelectFilter = function() {

  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="TechCtrl">
    <select class="form-control" ng-model="Software" ng-options="o as o for o in Softwares" id="softId" ng-change="onSelectFilter()">
      <option value=''>--- Software ---</option>
    </select>
    <button id="resetDd" class="btn btn-default" ng-click="reset()">RESET</button>

  </div>
</div>

＆＃13;

Fiddle here

Answer 2

尝试将Software的值设置为null

<button id="resetDd" class="btn btn-default" ng-click="Software = null">GO</button>

如何在按钮单击时重置下拉菜单

2 个答案: