2017-08-14 30 views
-1

こんにちは私はangularjsでWebアプリケーションを開発しています。私は1つのフォームを持っており、私は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];を試しましたが、これも私にとってはうまくいきます。誰かが、デフォルトで最初の値を選択する正しい方法を提示する手助けをすることができますか?どんな助けもありがとう。ありがとうございました。あなたが$scope.user.period = 1;で細かい作業この

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

答えて

2

そのようなものを使用することができます

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>

+1

問題は$ scope.user = {}でした。 $ scope.user.period = 1; $ scope.user = {};私はもう一度$ scope.user = {}を持っていました。 –

+0

それを取り除く。値を削除します –

+0

ええ、ありがとう.... –

1

してみてください。多分あなたは、あなたがあなたのオプションを作成するために使用されるリスト内の項目であることをng-modelを割り当てる必要がドキュメントを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>

+0

ありがとうございました。 No luck –

1

:このようにそれを設定するための

0

第一の目的として、ユーザーを宣言するのを忘れていますあなたはあらかじめ選択したいと思っています。この場合、最初の項目は$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

関連する問題