如何在Angularjs中的选择控件中设置默认选定值？

-1

嗨我正在angularjs中开发web应用程序。我有一个表单，我已经把dropdownlistbox。下面是我的代码来填充dropdownboxlist数组。如何在Angularjs中的选择控件中设置默认选定值？

<select class="with-icon" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required> 
                <option value="" label="{{ 'Period' | translate }}">{{ 'Period' | translate }}</option> 
               </select>

以下是我的JS代码。

$scope.periodList = [{ ID: 1, period: '1 Month' }, { ID: 2, period: '2 Month' }, { ID: 3, period: '3 Month' }, { ID: 4, period: '4 Month' }, { ID: 5, period: '5 Month' }, { ID: 6, period: '6 Month' }];

我试图设置默认的第一个值如下。

$scope.user.period = [{ ID: 1, period:'1 Month' }];

这种方法对我不起作用。我尝试了下面的方法$scope.user.period=1;即使这不适合我。我试过$scope.user.period = $scope.periodList[1];，这也对我有用。有人可以帮助我提出正确的方法来默认选择第一个值。任何帮助，将不胜感激。谢谢。

来源

2017-08-14 Niranjan Godbole

其工作罚款$scope.user.period = 1;。也许你忘了申报的用户为对象第一

$scope.user = {}; 
$scope.user.period = 1;

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
$scope.periodList = [{ ID: 1, period: '1 Month' }, { ID: 2, period: '2 Month' }, { ID: 3, period: '3 Month' }, { ID: 4, period: '4 Month' }, { ID: 5, period: '5 Month' }, { ID: 6, period: '6 Month' }]; 
 
$scope.user = {}; 
 
$scope.user.period = 1; 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<select class="with-icon" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required> 
 
                <option value="" label="{{ 'Period' }}">{{ 'Period' }}</option> 
 
               </select> 
 
</div>

来源

2017-08-14 08:02:48

问题是$ scope.user = {}; $ scope.user.period = 1; $ scope.user = {} ;.我在最后还有$ scope.user = {}; –

删除。它会删除值 –

是啊，谢谢.... –

尝试设置这样的：

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.user = {}; 
 
$scope.periodList = [{ ID: 1, period: '1 Month' }, { ID: 2, period: '2 Month' }, { ID: 3, period: '3 Month' }, { ID: 4, period: '4 Month' }, { ID: 5, period: '5 Month' }, { ID: 6, period: '6 Month' }]; 
 
$scope.user.period = $scope.periodList[0].ID; 
 
});

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

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<select class="with-icon" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required> 
 
<option value="" label="{{ 'Period'}}">{{ 'Period'}}</option> 
 
</select> 
 
{{user.period}} 
 
</div>

来源

2017-08-14 07:59:02

谢谢。没有运气 –

您可以使用类似这样

<select ng-init="somethingHere = periodList[0]"> ... </select>

来源

2017-08-14 08:01:14 Sujay

按的文档，你需要分配ng-model是用于创建你的选择列表中的项目时你想要预选。在这种情况下，第一项在$scope.periodList。

<select class="with-icon" ng-model="periodList[0]" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required> 
    <option value="" label="{{ 'Period' | translate }}">{{ 'Period' | translate }}</option> 
</select>

你可以在这里找到更多的信息：https://docs.angularjs.org/api/ng/directive/ngOptions

来源

2017-08-14 08:04:06 iamalismith

如何在Angularjs中的选择控件中设置默认选定值？

回答

相关问题