使用 AngularJS 将选择重置为默认值

Question

我对 AngularJS 有以下问题。我有一个 使用 ngOptions 创建的选项进行选择。我想要 将所选选项设置回默认选项。我尝试过了 删除模型变量，例如：

if(angular.isDefined($scope.first)){
    delete $scope.first;
}

但这不起作用。这是我的html。

    <div ng-app="app">
        <div ng-controller="testCtrl">
            <select data-ng-model="first"  data-ng-options="item.name for item in selectContent" required="required">
              <option value="" style="display: none;">-- select --</option>
            </select>
            {{first.value}}
<hr/>
        <input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
        </div>
    </div>

这是我的 JavaScript 代码：

angular.module('app', []).controller('testCtrl', function ($scope) {
    $scope.selectContent = [
        {
            name: "first",
            value: "1"
        },
        {
            name: "second",
            value: "2"
        }
    ];

    $scope.resetDropDown = function() {
        if(angular.isDefined($scope.first)){
            delete $scope.first;
        }
    }
});

这是工作的jsfiddle：

http://jsfiddle.net/zono/rzJ2w/

我该如何解决这个问题？

最好的问候。

Answer 1

您的重置按钮位于包含您的控制器的 div 之外。这意味着您的 reset-function 在您尝试使用它的上下文中不存在。

改为：

<div ng-app="app">
    <div ng-controller="testCtrl">
        <select data-ng-model="first"  data-ng-options="item.name for item in selectContent" required="required">
          <option value="" style="display: none;">-- select --</option>
        </select>
        {{first.value}}
        <hr/>
        <input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
    </div>
</div>

使用调试器来确保您尝试修复的代码确实正在执行总是一个好主意。

Answer 2

$scope.resetDropDown = function() {
    $scope.first = "";
}

Answer 3

上述解决方案适用于 Windows 和 Android，但不适用于 iOS 浏览器。那里的事件可能以不同的顺序发生。

所以对于我的代码我：

1. 为选择元素创建了 ID，所以我可以很容易地找到它 查询；
2. 创建了对 to 语句的延迟调用，以确保 重置在最后发生；
3. 以防万一 以两种方式重置（但在 iOS 中，第一种方式实际上就足够了 也）；

  function resetDropDown () {
	  $timeout(function(){ 
    	  $scope.first  = '';
    	  
    	  // jQuery way
    	  $('select#idOfSelectElement option:first' ).prop( 'selected', true );
	  }, 200);
  }