javascript - 如何在AngularJS中设置下拉列表的默认值

标签 javascript angularjs

嗨,我正在用 angularjs 开发 Web 应用程序。我有一个包含一些值的下拉列表框。下面是我的 dropdownlistbox html 代码。

<select id="calc-year" ng-model="period" name="period" required range-numberddwn="rangeddwn">
   <option value="" label="{{ 'Month' | translate }}">{{ 'Month' | translate }}</option>
   <option ng-repeat="x in cal" value="{{x.Period}}">{{x.Period}} {{'Months' | translate}}</option>
</select>

下面是我为下拉列表框分配值的代码。

$scope.cal = response.data.data.Period;

下面是我分配给 cal 的数据的屏幕截图。

Dropdown values

如果我想默认设置第四个值,那么我尝试如下。

$scope.period = $scope.cal[4];和 $scope.period = response.data.data.Period[4];

每当我按照上面的方式设置时,下拉列表中都会出现空白值

以上两个选项都不适合我。我可以知道设置默认值的解决方案是什么吗?任何帮助,将不胜感激。谢谢。

最佳答案

在 Controller 中,在范围变量中设置一个值,将其作为下拉列表的默认值。确保 cal 变量存在于范围内。然后尝试这样的事情,

$scope.calValue = $scope.cal[3]; //This will be Default cal value

然后在你的 View (html)中,使用像这样的ng-options,

<select ng-model="calValue" ng-options="x.Period for x in cal"></select>

现在,calValue 将成为下拉列表中的默认值,如果您从下拉列表中选择任何其他选项,那么该值将成为 calValue 的值。

干杯!!

关于javascript - 如何在AngularJS中设置下拉列表的默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46439519/

相关文章:

angularjs - 如何使 otf 字体在 Azure 上的纯 Angular 站点上工作

javascript - 基于 Javascript 字典的列表理解

javascript - jQuery 菜单用户界面。展开二级子菜单时自动展开三级子菜单

angularjs - 将 angularjs 指令转换为 angular 10

javascript - 显示 ng-repeat 输出的数组中的一项

html - ui-select:如何更改所选元素的背景颜色?

javascript - 有必要在 Angular 指令链接内命名函数吗?

javascript - 带有 react-bootstrap 的 float 标签

javascript - 如何获取并显示对象中每个单词的计数?

javascript - 如何从对象中删除项目