额外的空白 space 包含在 angularjs 的动态下拉列表中

Question

我正在创建一个 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>

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

注意：数据是纯动态的，它可以很好地处理静态数据

我也试过 ng-option 但还是出现多余的空白 space

Answer 1

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

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

编辑：

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

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>

Answer 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">

额外的空白 space 包含在 angularjs 的动态下拉列表中

Extra blank space is including in dynamic dropdown in angularjs

javascript

angularjs

angularjs-ng-options

ng-init