如何在 AngularJS 中将 ng-model 变量重置为 Null？

Question

在AngularJS中，我有以下示例代码：

<select style="margin-left:5px;width:60px" id="product" ng-model="output.product">
<select style="margin-left:5px;width:60px" id="status" ng-model="output.status">

在我的 UI 屏幕中，我有一个按钮，用户可以在其中重置 product 和 status 的 select 下拉值，但我不确定如何为 output.product 和 output.status.

将我的 ng-model 范围输出值重置为 null

我试过 scope.output = ""; 但这似乎不起作用。

同样，我使用了 AngularJS (v1.1)。

Answer 1

可能有多种原因...下面的代码应该有所帮助，否则您可以分享您所在的位置：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.output = {
    'product': "",
    'status': ""
  }
  $scope.productChoices = ['product A', 'product B', 'product C', 'product D', 'product E'];
  $scope.statusChoices = ['active', 'pending', 'completed', 'cancelled'];
});

select {
  min-width: 100px;
}

<script src="https://code.angularjs.org/1.1.0/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  Select a product:
  <select style="margin-left:5px;width:60px" id="product" ng-model="output.product" ng-options="prd for prd in productChoices">
  </select>
  <br/> Select a status:
  <select style="margin-left:5px;width:60px" id="status" ng-model="output.status" ng-options="prd for prd in statusChoices">
  </select>

  <hr/> selected product: {{output.product}} <br/> selected status: {{output.status}}<br/>

  <br/>
  <button type="button" ng-click="output = {'product':'', 'status': ''}"> Reset
</button>
</div>

Answer 2

我不会为 AngularJS V1.1 写答案，因为该版本不再受支持。参见 AngularJS Version Support Status。

对于 1.7 版，通过将模型设置为 null 来重置 select：

  $scope.reset = function() {
      $scope.choice.product = null;
      $scope.choice.status = null;
  };

演示

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.choice = {};
  $scope.productChoices = ['product A', 'product B', 'product C', 'product D', 'product E'];
  $scope.statusChoices = ['active', 'pending', 'completed', 'cancelled'];

  $scope.reset = function() {
      $scope.choice.product = null;
      $scope.choice.status = null;
  };   
});

<script src="//unpkg.com/angular/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  Select a product:
  <select ng-model="choice.product" ng-options="prd for prd in productChoices">
      <option value="">Select a product</option>
  </select>
  <br/> Select a status:
  <select ng-model="choice.status" ng-options="prd for prd in statusChoices">
      <option value="">Select a status</option>
  </select>

  <hr/> selected product: {{choice.product}}
  <br/> selected status: {{choice.status}}
  <br/>
  <button type="button" ng-click="reset()">
    Reset
  </button>
</div>

如何在 AngularJS 中将 ng-model 变量重置为 Null？

How to reset ng-model variables to Null in AngularJS?

angularjs

angularjs-scope

angularjs-select

演示