Question

我有一个带有空白选项和其他选项的选择框。这些选项不是使用ngOptions指令生成的，因为它们是在服务器端生成的（使用Symfony表单）。

在某些情况下，我想取消选择所选的选择框值。这样就选择了空白选项。但我不能让这个工作。选择框不会更新。

我创建了一个jsfiddle来显示问题。

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('');
            });
        }
    };
});

Answer 1

调用$ setViewValue后使用modelController。$ render（）。这将更新DOM元素。

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();
            });
        }
    };
});

更新了小提琴here。

Answer 2

这样做：

        $timeout(function() {
            scope.foo.hero = '';
        });

因为你选择的模型是foo.hero，每当你改变它时，选择将改变所选择的。

Answer 3

不确定为什么需要使用modelController进行捣乱？你不能只是将模型更新为默认值吗？

myApp.directive('myDirective', function($timeout) {
    return {
        scope: {
            model: '=?ngModel'
        },
        link: function(scope, element, attrs, ctlrs) {
            $timeout(function() {
                scope.model = '';
            });
        }
    };
});

更新了小提琴here。

在AngularJS指令中以编程方式选择选择框的空白选项

3 个答案: