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

How to populate the options value in select dropdown

本文关键字：填充 选项 下拉列表 选择      更新时间：2023-09-26

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

我在 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 '。出于某种原因，我可以在下拉列表中看到一个空白选项，例如：

(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，因为我的代码中有其他限制。谁能帮我解决这个问题？真的很烦人。多谢！

尝试改用ng-options。这是文档。

我完全同意@aup和@Brad。最好使用 ng 选项。

但是如果你确实对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和$formatters的信息。

相关文章：