我对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/
我如何解决这个问题?
祝你好运。
答案 0 :(得分:9)
您的重置按钮位于包含控制器的div之外。这意味着您在尝试使用它的上下文中不存在您的重置功能。</ p>
更改为:
<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>
使用调试器确保您尝试修复的代码实际上正在执行时,这总是一个好主意。
答案 1 :(得分:6)
$scope.resetDropDown = function() {
$scope.first = "";
}
答案 2 :(得分:0)
上述解决方案适用于Windows和Android,但不适用于iOS浏览器。可能事件发生在那里的顺序不同。
所以对于我的代码我:
function resetDropDown () {
$timeout(function(){
$scope.first = '';
// jQuery way
$('select#idOfSelectElement option:first' ).prop( 'selected', true );
}, 200);
}