Question

我试图弄清楚如何摆脱显示在我的下拉菜单中的空白空间。有一个＆＃34; All＆＃34;选项不应该在菜单中。我摆脱了那个选项（可能不是正确的选择），有时候当我刷新时我可以看到菜单并且有一个空白区域，有时它只是在控制台上给我一个错误。我不确定为什么会出现这种变化。

最终，我必须摆脱所有选项（正确的方式）并删除它留下的空白区域。

这是我的js：

define(["app",
"lodash",
"service/reference",
"directives/control/topic-input"
], function (app) {
return app.directive('roleSelect', ['Reference', function (Reference) {
    return {
        restrict: 'A',
        scope: {
            selectedRole: '=',
            selectedTopics: '=?',
            presetRole: '=?',
            topicNameOnly: '@?',
            notUsePresets:'@?'
        },
        link: function ($scope, elem, attr) {
            $scope.talentRoles = [];
            $scope.topicNameOnly = ($scope.topicNameOnly === 'true');
            $scope.notUsePresets = ($scope.notUsePresets === 'true');
            if(!$scope.presetRole) {
                $scope.presetRole = {id: -1, code: "ALL", description: "All"}; 
            } // this is where the 'All' option comes from, so I just got rid of this if statement. Not sure if this is the right thing to do
            if(!$scope.notUsePresets) {
                $scope.talentRoles.push($scope.presetRole);
            }
            Reference.getTalentRoles($scope, function (response) {
                $scope.talentRoles =  response.concat($scope.talentRoles);
                for(var i = 0;i<$scope.talentRoles.length;i++){
                    if($scope.selectedRole && $scope.selectedRole.description == $scope.talentRoles[i].description){
                        $scope.selectedRole = $scope.talentRoles[i];
                    }
                }
            });
            $scope.showTopics = function(){
                return attr.selectedTopics
            }
            $scope.roleChanged = function(role) {
                $scope.selectedTopics = [];
            };
        },
        templateUrl: '/directives/control/role-select.html'
    };
}])
});

这是我的HTML：

<select class="form-control" required
    id="roleSelector"
    ng-options="talentRole as talentRole.description for talentRole in talentRoles track by talentRole.id" id="talentRole"
    ng-change="roleChanged(role)"
    ng-model="selectedRole">
<option ng-if="true" selected="true" value="" class="select-placeholder"><ln code="directive.role.select.tooltip" args=""></ln></option>
</select>
<div topic-input
 name-only="topicNameOnly"
 class="row-spacing"
 ng-show="showTopics()"
 ng-model="selectedTopics"
 talent-role-id="selectedRole.id"></div>

我对角度JS / html不太熟悉。但是，我确实理解<option> </option>标记确保从用户端选择的任何内容都保留在我这边（作为管理员）。因此，该功能需要保留。我也明白ng-options是这个菜单的母亲。所以也许需要对这个标签进行一些配置。

以下是从JavaScript中删除if语句之前的快照：

似乎当我删除if语句时，我在控制台上收到此错误：

TypeError：无法读取属性＆＃39; description＆＃39;未定义的

所以，我猜测摆脱这种状况不是正确的做法。如果我没有给予足够的帮助，我会道歉，但请让我知道我能做些什么来帮助你进一步帮助我，我将非常乐意接受。

Answer 1

如果您删除presetRole: '=?'，我认为您应该从$ scope初始化中删除if。

另外，您需要检查对presetRole的任何其他引用，因为即使您删除了if，presetRole仍会添加到talentRoles

告诉我它是否有效。

如何摆脱下拉菜单中的下拉菜单选项/空白区域 - 角度JS？

1 个答案: