额外的空格包含在 angularjs 的动态下拉列表中答案

【问题标题】：Extra blank space is including in dynamic dropdown in angularjs额外的空格包含在 angularjs 的动态下拉列表中
【发布时间】：2016-10-21 07:10:50
【问题描述】：

我正在创建一个 Web 应用程序，我在其中从数据库中获取数据，

<select ng-model="ucomname" ng-init="ucomname='{{o.comname}}'" ng-change="uucomname(o)">
 <option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>

这是我的下拉列表，但它在顶部添加了一个空白行，但是当我获取静态数据时它工作正常，但是当我使用动态数据时它开始在下拉列表中添加一个额外的空白，

注意：数据是纯动态的，它适用于静态数据

我也尝试了ng-option，但仍然得到额外的空白

【问题讨论】：

你可以添加一个空的选项标签。
查看这个问题stackoverflow.com/questions/12654631/…

标签： javascript angularjs angularjs-ng-options ng-init

【解决方案1】：

当 select 的 ng-model 未定义或 ng-model 引用的值在一组选项中不存在时，就会发生这种情况。在这种情况下，Angular 默认会添加它。只需根据您的逻辑给出一些值，它不会显示空白选项。

在ng-init="ucomname='{{o.comname}}'" 中，我认为o 没有任何价值，因为您是在ng-repeat 中的select 内的option 标签上创建它，而不是在select 标签本身上（它对ng 是正确的- 重复该选项，但您无法在选择时获取该变量）

编辑：

我添加了一个示例。我不知道您的确切变量，因此使用了我的选择之一，因此稍微修改了 ng-option 声明并删除了 change 函数，因为我没有。但是你应该注意到下面的主线 $scope.ucomname = $scope.comnamelistfun[0].comname; 我们正在为 select 的 ng-model 分配一个默认值。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.comnamelistfun = [
      {comname: 'a'},
      {comname: 'b'},
      {comname: 'c'}
    ];
    $scope.ucomname = $scope.comnamelistfun[0].comname;
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


<select ng-model="ucomname" ng-options="o.comname as o.comname for o in comnamelistfun">
</select>



</body>
</html>

【讨论】：

我需要做什么？

【解决方案2】：

在你的控制器中试试这个

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
$scope.comnamelistfun = [
  {comname: 'One'},
  {comname: 'Two'},
  {comname: 'Three'}
];
 $scope.ucomname=$scope.comnamelistfun[0].comname;
});

查看

<div ng-controller="Ctrl">
<select ng-model="ucomname" ng-options="o.comname as o.comname for o in comnamelistfun">

【讨论】：