ionic指令从select中删除第一个选项

I'm trying to make a directive which should remove the first option of a select.

我正在尝试制作一个应该删除select的第一个选项的指令。

I'm using this html to generate the select box:

我正在使用此html生成选择框:

 <select remove-whitespace ng-model="user.encryption">                                      
      <option ng-repeat="r in selectButtons" title="{{r.text}}" ng-selected="$first" value="{{r.value}}">{{r.text}}</option>                            
 </select>

This part of code is in my controller to populate the select box in the view:

这部分代码在我的控制器中填充视图中的选择框:

    $scope.selectButtons = [
        {text: "Clear-Text", value: "no_encryption"},
        {text: "MD5", value: "md5_encryption"},
        {text: "SHA1", value: "sha1_encryption"},
    ];

I'm using this as my directive:

我正在使用它作为我的指令:

.directive("removeWhitespace", function () {
    return{
        require: 'ngModel',
        link: function (scope, element, attributes, ngModel) {            
            console.log(element.context); 
        }
    }
});

When i do a console.log(element.context); the following context appears in my browser console:

当我做一个console.log(element.context);我的浏览器控制台中显示以下上下文:

Yet I can't seem to remove the option with value "? undefined:undefined ?"

但我似乎无法删除值为“?undefined:undefined?”的选项。

2 个解决方案

#1

It seems i've found a solution to my own question:

我似乎找到了解决自己问题的方法:

To properly populate a select box you need to use ng-options instead of ng-repeat.

要正确填充选择框,您需要使用ng-options而不是ng-repeat。

I ended up using the following:

我最终使用了以下内容:

     <select ng-model="selectButton"
      ng-options="r.text for r in selectButtons">                                
     </select>

This will populate a selectbox without whitespace. And the directive is not needed anymore.

这将填充没有空格的选择框。并且不再需要该指令。

#2

The first element (? udefined:undefined ?)is there because the current value of the ng-model does not match any of the options. It will go away on its own if you do something like this in your controller:

第一个元素(?udefined:undefined?)就在那里,因为ng-model的当前值与任何选项都不匹配。如果您在控制器中执行此类操作,它将自行消失:

$scope.user.encryption="no_encryption"

To answer the question fully, here is a simple directive that removes the first option of a select, though I would advise against using anything like it because it would be better to use ng-options possibly combined with a filter

要完全回答这个问题,这里有一个简单的指令,删除了select的第一个选项,虽然我建议不要使用类似的东西,因为使用ng-options可能会更好地结合过滤器

angular.module('app').directive('removeFirst',function(){
  return{
    link:function(scope,element) {
      element.find('option')[0].remove();
    },
  }
})

#1