在 AngularJS 指令中以编程方式选择选择框的空白选项 [英] Select the blank option of select box programmatically in AngularJS directive
问题描述
我有一个带有空白选项和一些其他选项的选择框.这些选项不是使用 ngOptions 指令生成的,因为它们是在服务器端生成的(使用 Symfony 表单).
在某些情况下,我想取消选择选择框的选定值.这样就选择了空白选项.但我无法让它发挥作用.选择框未更新.
我创建了一个 jsfiddle 来显示问题.
html
<表格名称=表格"><select ng-model="foo.hero" name="foo[hero]" my-directive=""><option value=""></option><option value="1">蝙蝠侠</option><option value="2">超人</option><option value="3">蜘蛛侠</option></选择></表单><p>已选择:{{ foo.hero }}</p>
javascript
var myApp = angular.module('myApp',[]);函数 MyCtrl($scope) {$scope.foo = {英雄:'2'};}myApp.directive('myDirective', function($timeout) {返回 {要求: ['ngModel', '?form'],链接:功能(范围,元素,属性,ctlrs){$超时(功能(){var modelController = ctlrs[0];modelController.$setViewValue('');});}};});
在调用 $setViewValue 后使用 modelController.$render().这将更新 DOM 元素.
myApp.directive('myDirective', function($timeout) {返回 {要求:['ngModel', '?form'],链接:功能(范围,元素,属性,ctlrs){$超时(功能(){var modelController = ctlrs[0];modelController.$setViewValue('');modelController.$render();});}};});
更新小提琴 此处.
I have a select box with a blank option and some other options. The options are not generated with ngOptions directive, because they are generated on server side (with Symfony forms).
In some cases I want to unselect the selected value of the select box. So that the blank option is selected. But I cannot get this to work. The select box does not get updated.
I have created a jsfiddle to show the problem.
html
<div ng-controller="MyCtrl">
<form name="form">
<select ng-model="foo.hero" name="foo[hero]" my-directive="">
<option value=""></option>
<option value="1">Batman</option>
<option value="2">Superman</option>
<option value="3">Spiderman</option>
</select>
</form>
<p>Selected: {{ foo.hero }}</p>
</div>
javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.foo = {hero: '2'};
}
myApp.directive('myDirective', function($timeout) {
return {
require: ['ngModel', '?form'],
link: function(scope, element, attrs, ctlrs) {
$timeout(function() {
var modelController = ctlrs[0];
modelController.$setViewValue('');
});
}
};
});
Use modelController.$render() after you call $setViewValue. This will update the DOM element(s).
myApp.directive('myDirective', function($timeout) {
return {
require: ['ngModel', '?form'],
link: function(scope, element, attrs, ctlrs) {
$timeout(function() {
var modelController = ctlrs[0];
modelController.$setViewValue('');
modelController.$render();
});
}
};
});
Updated fiddle here.
这篇关于在 AngularJS 指令中以编程方式选择选择框的空白选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!