Question

我正在尝试解决select元素上的一个奇怪的错误。出于某种原因，下拉列表顶部始终有一个黑色选项。

我在html中有这样的东西。

此元素包含在我的测试控制器中。

<select ng-model="vm.pickTest">
  <option ng-repeat="test in vm.tests"
          ng-selected="test.id === vm.pickTest.id">{{test.title}}</option>
</select>

内部测试控制器

   //init controller codes...
     vm.pickTest = {'id':'id1', 'title':'title1'}

     vm.tests = [
       {'id':'id1','title':'title 1'},
       {'id':'id2','title':'title 2'},
       {'id':'id3','title':'title 3'},
     ]

所以当页面首次加载时，它会预先选择'title 1＆＃39;默认情况下。出于某种原因，我可以在下拉列表中看到一个空白选项，如：

(blank)
title 1 <---pre-selected
title 2
title 3

我尝试过使用

<select ng-model="vm.pickTest">
  <option value="" style="display: none;">test</option>
  <option ng-repeat="test in vm.tests"
          ng-selected="test.id === vm.pickTest.id">{{test.title}}</option>
</select>

正如其他帖子所暗示但仍然没有运气。由于我的代码中存在其他限制，我也不想使用ng-option。任何人都可以帮我解决这个问题吗？这真的很烦人。非常感谢！

Answer 1

请尝试使用ng-options。这是documentation。

Answer 2

我完全同意@aup和@Brad。最好使用ng-options。

但如果您对ng-option的使用有限制，可以使用以下技巧。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.tests = [{
      'id': 'id1',
      'title': 'title 1'
    }, {
      'id': 'id2',
      'title': 'title 2'
    }, {
      'id': 'id3',
      'title': 'title 3'
    }, ];
    vm.pickTest = vm.tests[0];
  })
  .directive('convertToObject', function() {
  return {
    require: 'ngModel',
    scope:{
     convertToObject:"="
    },
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        for(var i=0;i<scope.convertToObject.length;i++)
        {
          if(scope.convertToObject[i].id===val)
            return scope.convertToObject[i];
        }
        return null;
      });
      ngModel.$formatters.push(function(val) {
        return val.id;
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <select ng-model="vm.pickTest" convert-to-object="vm.tests">
      <option ng-repeat="test in vm.tests" value="{{test.id}}">{{test.title}}</option>
    </select>
    <pre>{{vm.pickTest|json}}</pre>
  </div>
</div>

有关$parsers and $formatters的更多信息。

如何在选择下拉列表中填充选项值

2 个答案: