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

我对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/

我怎么能解决这个问题？

最好的祝福。

7906

2017-07-28 08:27

起源

答案:

您的重置按钮位于包含控制器的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>

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

2017-07-28 08:32

我的错误。这只是示例代码。不是我项目中的实际代码。我编辑了代码+1。 - Georgi Naumov

@GeorgiNaumov嗯，它适用于这种变化： jsfiddle.net/rzJ2w/7 据我所知，select-dropdown被重置为原始值。那不是你想要的吗？ - ivarni

所以..两种解决方案都在工作，但在我的代码中这不起作用。通常我用你的方式 - 删除。会挖掘我的代码。问题不在于删除。 - Georgi Naumov

您应该能够将其设置为 null 而不是删除该属性。 - ivarni

答案:

您的重置按钮位于包含控制器的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>

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

2017-07-28 08:32

我的错误。这只是示例代码。不是我项目中的实际代码。我编辑了代码+1。 - Georgi Naumov

@GeorgiNaumov嗯，它适用于这种变化： jsfiddle.net/rzJ2w/7 据我所知，select-dropdown被重置为原始值。那不是你想要的吗？ - ivarni

所以..两种解决方案都在工作，但在我的代码中这不起作用。通常我用你的方式 - 删除。会挖掘我的代码。问题不在于删除。 - Georgi Naumov

您应该能够将其设置为 null 而不是删除该属性。 - ivarni

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

2017-07-28 08:31

我喜欢这个答案有多简单。在我的情况下，我从价格下拉菜单中选择，然后在更新后点击“全部更新”我希望它重置，所以我可以将它设置为“”这是完美的！ - Sprose

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

所以对于我的代码我：

为select元素创建了ID，所以我可以很容易地找到它 IQUERY;
创建延迟调用语句以确保重置发生在最后;
以防万一以两种方式重置（但只是第一种方式在iOS中实际上足够了）太）;

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

2018-01-13 00:46

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

答案:

答案:

热门问题

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