如何在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中的選擇控件中設置默認選定值？

回答

相關問題