2016-04-22 211 views
4

這是我的Java腳本代碼設置默認值下拉

$scope.dateSelection = { 1: 'Today' , 2: 'Yesterday' ,3: 'Last 7 days', 4: 'Last business week (Mon - Fri)' , 5: 'Last week (Sun - Sat)' , 6: 'This month' , 7: 'Last month' , 8: 'All time' , 9: 'CUSTOM_DATE',10: 'This week (Sun - Today)',11: 'This week (Mon - Today)' , 12: 'Last week (Sun - Sat)' }; 

這是我的HTML代碼

<select ng-options="key as value for (key,value) in dateSelection track by key" ng-change="getPerformanceData(indexValue)" ng-model="indexValue" > 
      </select> 

我想設置一個默認值是「3:「最近7天'「作爲下拉菜單。

回答

1

您也可以活生生的例子只是通過改變達到預期的效果模板。

<select 
    ng-init="indexValue = '3'" 
    ng-options="key as value for (key,value) in dateSelection" 
    ng-model="indexValue" 
    ng-change="getPerformanceData(indexValue)"> 
</select> 

你會發現,我已經刪除了track by表達,因爲它的主要目的是幫助在內部與數組排序的角度 - 這是因爲你使用的是對象,而不是一個數組是什麼導致你的問題。

我也設置在HTML模板中的默認值,但也可以在你的控制器完成的,它只是一個偏好的問題。

+0

謝謝@Cosmin Ababei –

0

嘗試這樣的:

<select ng-options="key as value for (key,value) in dateSelection track by key" ng-init="key[2]" ng-change="getPerformanceData(indexValue)" ng-model="indexValue" > 
      </select> 

在你的HTML標籤select使用ng-init,將設置一個默認選項

UPDATE

我plnkr做出了表率。檢查此:plunker

+0

感謝您給予回覆,但它不起作用 –

+0

然後用您的正確值替換關鍵[2]。它將工作100%。你只需要在'ng-init'中設置正確的值。 – dpaul1994

+0

其實我試圖給出錯誤 –

2

如果您可以自定義您的對象的鍵將是string,那麼您可以通過設置控制器中的值進行初始化。

jsfiddle活生生的例子。

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($scope) { 
 
    $scope.indexValue = "2"; 
 
    $scope.dateSelection = { 
 
     1: 'Today', 
 
     "2": 'Yesterday', 
 
     "3": 'Last 7 days', 
 
     4: 'Last business week (Mon - Fri)', 
 
     5: 'Last week (Sun - Sat)', 
 
     6: 'This month', 
 
     7: 'Last month', 
 
     8: 'All time', 
 
     9: 'CUSTOM_DATE', 
 
     10: 'This week (Sun - Today)', 
 
     11: 'This week (Mon - Today)', 
 
     12: 'Last week (Sun - Sat)' 
 
    }; 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 

 
    <select ng-options="key as value for (key,value) in dateSelection" ng-model="indexValue"> 
 
    </select> 
 
    {{indexValue}} 
 

 
    </div> 
 
</div>

+0

你不必改變它在字符串..你可以簡單地用索引:)我不是說這個是一個壞方法,但不是最好的 – dpaul1994

+0

在你的答案中顯示如何使用索引做到這一點?而且,你的'plnkr'不起作用。並沒有設置默認值:) –

+0

好的。也許不是最好的。什麼是最好的呢? –

0

請看下面的例子:

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <select ng-model="person"> 
     <option ng-repeat="x in people">{{x.name}}</option> 
    </select> 
    <script> 
     //Module declaration 
     var app = angular.module('myApp',[]); 
     //controller declaration 
     app.controller('myCtrl', function($scope){ 
      $scope.people = [{name:"Peter"},{name:"Julie"},{name:"Roger"}]; 
      $scope.person = "Julie"; 
     }); 
    </script> 
</body> 
</html> 

希望它可以解決您的問題!

2

我想這一點,這也是工作

JsFiddle

$scope.indexValue = "3"; 
    $scope.dateSelection = { 1: 'Today', 
2: 'Yesterday', 
3: 'Last 7 days', 
4: 'Last business week (Mon - Fri)', 
5: 'Last week (Sun - Sat)', 
6: 'This month', 
7: 'Last month', 
8: 'All time', 
9: 'CUSTOM_DATE', 
10: 'This week (Sun - Today)', 
11: 'This week (Mon - Today)', 
12: 'Last week (Sun - Sat)' }; 

我的HTML文件

<select class="form-control" ng-model="indexValue" ng-change="getPerformanceData(indexValue)"> 
       <option ng-repeat="(key, value) in dateSelection track by key" ng-selected="{{key == indexValue}}" value="{{key}}">{{value}}</option> 
      </select> 

在有沒有自定義我們的字符串