Question

我有一个用于列表的select元素，并绑定到一个数组。当数组为空时，选项元素将添加到select元素 - 如下所示。这导致列表突出显示，我不想要

<select id="activeItemsSelect" ng-model="activeItems" ng-options="item.assessment_title for item in activeAssessments" size="5" class="span10" empty-select>

我正在尝试删除选项元素并尝试在指令中执行此操作，空选 - 虽然不成功。如何删除此选项元素？

先谢谢所有回复。

Answer 1

您可能想要做的只是禁用选择。如果ng-model不作为选项存在，Angular总是添加一个空选项。

<select id="activeItemsSelect" 
        class="span10"
        size="5" 
        ng-model="activeItems" 
        ng-disabled="activeItems.length == 0"
        ng-options="item.assessment_title for item in activeAssessments"
        ></select>

修改：根据文档更新的Angular版本：

https://docs.angularjs.org/api/ng/directive/ngOptions：可选地，将值设置为空字符串的单个硬编码元素嵌套到元素中。然后，此元素将表示null或“未选择”选项。请参阅下面的示例进行演示。

<select id="activeItemsSelect" 
        class="span10"
        size="5" 
        ng-model="activeItems" 
        ng-disabled="activeItems.length == 0"
        ng-options="item.assessment_title for item in activeAssessments">
  <option value="">Select an Option</option>
</select>

当数组为空时，您甚至可能希望将选项重新绑定到某些文本。

Answer 2

你可能想手动添加一个空选项（angular应该抓住它），并使用ng-switch删除它

Answer 3

初始化与select一起使用的模型，因此select小部件在显示时将具有默认值，而不是显示为空。在您的情况下，在控制器中执行以下操作。

$scope.activeItems = $scope.activeAssessments[0].assessment_title

Answer 4

我正在使用此指令支持ng-size属性的表达式：

.directive('ngSize', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (element.prop("tagName") !== 'SELECT') {
                throw new Error('ngSize can only be applied to <select>-elements');
            }

            var exp = attrs.ngSize;
            scope.$watch(exp, function (newVal) {
                attrs.$set('size', newVal);
            });
        }
    }
})

Angular - 从select元素中删除空选项（？）

4 个答案: