AngularJS select 中的默认选项在 IE9 中不起作用
AngularJS default option in select not working in IE9
我的 AngularJS 应用程序中有一个表单,其中包含带有默认选项的下拉菜单。我使用 ng-init 和 ng-selected 来实现这一点。它在 Chrome 中工作正常,但在 Internet Explorer 9 中,当我第一次加载页面时,下拉列表中显示的是文字 angularjs 表达式,即“{{ showMethod(args) }}” .当我去更改选项时,选项就在那里。只是最初没有表达出来。
这是我的 HTML 代码:
<td>
<div ng-if="var.methods.length==0">NA</div>
<div ng-if="var.methods.length>0">
<select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)" ng-model="selectedmethods[var.id]" >
<option ng-repeat="method in var.methods" value="{{method.id}}" ng-selected="isMethodSelected(var.id,method)">{{ showMethod(method,var.id)}}</option>
</select>
</div>
这是另一个 ng-repeat 的一部分。
最初,我使用 ng-init 将所选方法设置为该变量的默认方法。使用 ng-selected 和一个名为 isMethodSelected 的方法,我通过检查 selectedmethods 对象检查用户是否选择了该方法,如果没有,则检查该方法是否为默认方法。
然后,我使用 showMethod 函数显示方法名称,我添加该函数是为了查看这是否有助于 IE 中的问题(它没有)。我之前只有表达式 method.formattedMethodName.
这是我的部分 JS 代码:
$scope.isMethodSelected = function(varid,method) {
var sel = false;
if($scope.request.specsByVar.hasOwnProperty(varid) && $scope.request.specsByVar[varid].method.id==method.id) {
sel = true;
} else if(!$scope.request.specsByVar.hasOwnProperty(varid) && method.defaultMethod) {
sel = true;
}
return sel;
}
$scope.defaultMethod = function(varid,methods) {
var defaultMethod;
if($scope.request.specsByVar.hasOwnProperty(varid)) {
defaultMethod = $scope.request.specsByVar[varid].method.id;
} else {
for (var i = 0; i < methods.length; i++) {
if(methods[i].defaultMethod) {
defaultMethod = methods[i].id;
break;
}
}
}
return defaultMethod;
}
$scope.showMethod = function(method,varid) {
if(method) {
return method.formattedMethodName;
} else {
return $scope.selectedmethods[varid].formattedMethodName;
}
};
这显然是 IE 问题。有人有解决办法吗?
谢谢,
奥尔加
我使用 ng-options 解决了这个问题:
<select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)"
ng-model="selectedmethods[var.id]" title="{{ selectedmethods[var.id].formula }}"
ng-options="method.id as method.formattedMethodName for method in var.methods | filter:{active:true}">
</select>
我的 AngularJS 应用程序中有一个表单,其中包含带有默认选项的下拉菜单。我使用 ng-init 和 ng-selected 来实现这一点。它在 Chrome 中工作正常,但在 Internet Explorer 9 中,当我第一次加载页面时,下拉列表中显示的是文字 angularjs 表达式,即“{{ showMethod(args) }}” .当我去更改选项时,选项就在那里。只是最初没有表达出来。
这是我的 HTML 代码:
<td>
<div ng-if="var.methods.length==0">NA</div>
<div ng-if="var.methods.length>0">
<select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)" ng-model="selectedmethods[var.id]" >
<option ng-repeat="method in var.methods" value="{{method.id}}" ng-selected="isMethodSelected(var.id,method)">{{ showMethod(method,var.id)}}</option>
</select>
</div>
这是另一个 ng-repeat 的一部分。
最初,我使用 ng-init 将所选方法设置为该变量的默认方法。使用 ng-selected 和一个名为 isMethodSelected 的方法,我通过检查 selectedmethods 对象检查用户是否选择了该方法,如果没有,则检查该方法是否为默认方法。
然后,我使用 showMethod 函数显示方法名称,我添加该函数是为了查看这是否有助于 IE 中的问题(它没有)。我之前只有表达式 method.formattedMethodName.
这是我的部分 JS 代码:
$scope.isMethodSelected = function(varid,method) {
var sel = false;
if($scope.request.specsByVar.hasOwnProperty(varid) && $scope.request.specsByVar[varid].method.id==method.id) {
sel = true;
} else if(!$scope.request.specsByVar.hasOwnProperty(varid) && method.defaultMethod) {
sel = true;
}
return sel;
}
$scope.defaultMethod = function(varid,methods) {
var defaultMethod;
if($scope.request.specsByVar.hasOwnProperty(varid)) {
defaultMethod = $scope.request.specsByVar[varid].method.id;
} else {
for (var i = 0; i < methods.length; i++) {
if(methods[i].defaultMethod) {
defaultMethod = methods[i].id;
break;
}
}
}
return defaultMethod;
}
$scope.showMethod = function(method,varid) {
if(method) {
return method.formattedMethodName;
} else {
return $scope.selectedmethods[varid].formattedMethodName;
}
};
这显然是 IE 问题。有人有解决办法吗?
谢谢, 奥尔加
我使用 ng-options 解决了这个问题:
<select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)"
ng-model="selectedmethods[var.id]" title="{{ selectedmethods[var.id].formula }}"
ng-options="method.id as method.formattedMethodName for method in var.methods | filter:{active:true}">
</select>