Reset выберите значение по умолчанию с помощью функции 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/

Как я могу решить эту проблему?

С уважением.

Ответ 1

Ваша кнопка reset находится за пределами div, содержащего ваш контроллер. Это означает, что ваша reset -функция не существует в контексте, где вы пытаетесь ее использовать.

Изменить на:

<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>

Всегда полезно использовать отладчик, чтобы убедиться, что код, который вы пытаетесь исправить, фактически выполняется.

Ответ 2

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

Ответ 3

Решение выше работает для Windows и Android, но не работает для iOS-браузеров. Вероятно, события происходят в другом порядке.

Итак, для моего кода I:

создан идентификатор для выбранного элемента, поэтому я мог бы легко найти его iQuery;
создано отложенное обращение к операторам, чтобы обеспечить reset происходит в самом конце;
и на всякий случай сброс двумя способами (но только первый способ был фактически достаточно в iOS тоже);

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