2016-04-22 8 views
4

Das ist mein Java-Script-Code istsetzen einen Standardwert für die Dropdown

$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)' }; 

Das ist mein HTML-Code

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

ich einen Standardwert festlegen möchten, ist „3:‚Die letzten 7 Tage "" für das Dropdown.

Antwort

1

Sie anpassen können erreichen Sie den gewünschten Effekt nur durch den Wechsel der HTML Vorlage.

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

Sie werden bemerken, dass ich die track by Ausdruck entfernt haben, wie es meistens gemeint ist Eckige zu helfen, intern mit Array-Sortierung - und das ist, was Ihre Probleme verursacht wurde, wie Sie ein Objekt und nicht ein Array verwenden .

Ich habe auch den Standardwert in der HTML Vorlage, aber das kann auch in Ihrem Controller getan werden, es ist nur eine Frage der Präferenz.

+0

danke @Cosmin Ababei –

0

Versuchen wie folgt aus:

<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> 

Mit ng-init in Ihrem HTML select Tag wird

UPDATE

ich ein Beispiel in plnkr eine Standard-Option gemacht. Überprüfen Sie Folgendes: plunker

+0

Vielen Dank für Ihre Antwort, aber es funktioniert nicht –

+0

dann ersetzen Sie die Taste [2] mit Ihrem korrekten Wert. es wird 100% funktionieren. Sie müssen nur den richtigen Wert in 'ng-init' setzen. – dpaul1994

+0

Eigentlich versuche ich es gibt Fehler –

2

Wenn Sie Ihr Objekt an die Tasten anpassen können, wäre string, dann können Sie initialisieren, indem Sie Wert in der Steuerung einstellen.

Live Beispiel auf 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

Sie müssen das nicht in Zeichenfolge ändern .. Sie können es einfach mit Index tun :) Ich sage das nicht ist ein schlechter Ansatz, aber ist nicht der beste – dpaul1994

+0

Zeigen Sie in Ihrer Antwort, wie man das mit einem Index macht? Außerdem funktioniert dein 'PLNKR' nicht. Und legt nicht den Standardwert fest :) –

+0

Ok. Vielleicht ist das nicht das Beste. Was ist dann das Beste? –

0

Siehe das folgende Beispiel:

<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> 

Hoffe, dass es Ihr Problem löst!

2

Ich habe versucht, diese, diese auch

Live-Beispiel auf 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)' }; 

ich HTML-Datei auch

<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> 

Dort arbeitet ohne unsere String

Verwandte Themen