角度中的组合框(选择组件)不基于参数设置显示值

Combobox (select component) in angular not setting display value based on a parameter

本文关键字:于参数 参数 显示 设置 组件 组合 选择      更新时间:2023-09-26

我一直在寻找这个主题并找到了很多方法,但直到现在我都无法找到符合我需求的东西。

我在控制器级别有以下代码:

controller: function($scope, $uibModalInstance) {            
        $scope.rawDownloads = [{name: 'QA environment', month: 'Dec'}, {name: 'Production environment', month: 'Feb'}, {name: 'UAT environment', month: 'Jul'}];
        $scope.availableMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];                       
      }

我在视图部分所做的如下:

<table align="center">
<tr>
  <td>Environment Name</td>
  <td>Current Release Month</td>
</tr>
<tr data-ng-repeat="e in rawDownloads">
  <td>{{e.name}}</td>  
  <td><select id="{{e.name}}" name="{{e.name}}" ng-model="selectedMonth" ng-options="m as m for m in availableMonths"></select></td>
</tr>
</table>

"rawDownloads"实际上是来自服务的数据,一个包含更多元素和其他属性的简单数组,但我只是总结一下以使其更简单。

如您所见,我应该有三行,每行应该有一个选择组件。我在为每一行显示"选择"组件时遇到问题,它为每一行显示从 1 月到 12 月的月份(直到该部分都没有问题);但是,第一个索引始终是空格,我不太确定如何删除它,但是当我尝试为 select 组件设置默认值时,主要问题就出现了。例如,属于"QA 环境"的第一行应将选择选项的值默认为"Dec",但每次我使用 ng-init 将 rawDownloads 中的月份值设为默认值时,整个事情都会变得混乱。我尝试ng-model试图设置ng-model="{{e.month}}"但也没有结果。

有人可以就此问题提供反馈吗?我一直在使用"ng-repeat"的<select><options>标签上尝试这样做,但根本没有成功。

提前谢谢。

如果需要默认值,可以设置ng-model="e.month"

<select id="{{e.name}}" 
    name="{{e.name}}" 
    ng-model="e.month" 
    ng-options="m as m for m in availableMonths">
</select>

看小提琴:http://jsfiddle.net/bZX7Q/80/