AngularJs und <select>: Standardmäßig ausgewählten Optionen entfernt

Erwarte ich den folgenden code für die Darstellung einer drop-down-Liste mit der Dritten option ist standardmäßig ausgewählt. Allerdings, wenn ich binden Sie die wählen Sie mit angularjs, die Standard-Auswahl verschwindet. Irgendwelche Gedanken?

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/TXPJZ/134/

Dank!

InformationsquelleAutor Ivo | 2013-07-26

angularjs html-select

21

Der einfachste Weg, um zu reparieren Ihre Umsetzung ist die Verwendung ng-init.
```
<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>
```
Versuchen Sie es auf FIDDLE.

Wohl auf der Hand, aber da es mich auch erwischt, denkt daran, schließen Sie den ng-init-Wert in einfache Anführungszeichen, wenn Ihr ein string, z.B. ng-init="selectedColors='rot'"
dies funktioniert nicht, wenn Sie sind, bevölkern Sie die wählen Sie mit ng-options="row.desc for row in affiliationTable" weil ich don ' T wissen, einen Weg, um den Wert zuzuweisen, wenn Sie es dieser Weg tun, weißt du, wie ich das tun kann?
Die offizielle Dokumentation für ng-init steht Folgendes: "Die einzig angemessene Verwendung von ngInit für aliasing speziellen Eigenschaften der ngRepeat, wie in der demo unten. Neben diesem Fall sollten Sie Controller verwenden, anstatt ngInit zum initialisieren von Werten auf einen Rahmen.". Gibt es irgendeinen anderen Weg, um zu entfernen de 'default' - Wert?

InformationsquelleAutor zsong
9

Winkel-überschreibt die "selected" Eigenschaft, wenn Sie binden Sie das wählen Sie ein Modell. Wenn Sie besichtigen den DOM gerendert werden Sie feststellen, dass ein neues Element Hinzugefügt wurde:
```
<option value="? undefined:undefined ?"></option>
```
Damit automatisch wählen Sie die Dritte option, die Sie brauchen, um pre-bevölkern das Modell im Rahmen. Es gibt ein paar Möglichkeiten, dies zu tun, einschließlich der Umbruch, wählen Sie im controller:
```
<div ng-controller="MyCtrl">
    <select id="myselection" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
<div>Selected Colors: {{selectedColors }}</div>
```
Und dann definieren, dass das model in den controller.
```
var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);
```
Hier ist ein Beispiel.

http://jsfiddle.net/93926/

Alternativ können Sie nur die Initialisierung mithilfe von ng-init, wie in diesem Beispiel:
```
<div ng-init="selectedColors=3">
```
http://jsfiddle.net/9JxqA/1/

EDIT: Entfernt die ausgewählte Eigenschaft in dem ersten Beispiel, es ist nicht mehr nötig.

InformationsquelleAutor Brendan
2

Durch hinzufügen von option mit einem leeren Wert zu wählen und zu initialisieren selectedColors auf eine leere Zeichenfolge(ng-init="selectedColors=""), können wir sehen, 'Farbe auswählen' - option auf der Oberseite, anstatt zunächst die Farbe ausgewählt werden defaultly:
```
<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
    <option value="">Select Color</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
    <option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
```
Versuchen Sie es auf der Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/

Ich wähle diese Antwort. unter Berufung auf ng-init selbst manchmal schafft temporäre leere <option>. Tipp: fügen Sie disabled="disabled" <option> " für " die "Farbe Auswählen". Danke für deine Antwort.

InformationsquelleAutor CodecPM

Müssen Sie nur zwei Dinge tun
1)ng-init="Tage='noday'"
2)ng-selected="true"

 <select class="filtersday" ng-init="days='noday'" ng-model="days">
 <option ng-selected="true" value="noday">--Select Day--</option>

InformationsquelleAutor Deepak Dholiyan

Sollten Sie verwenden Sie einfache Anführungszeichen, um Arbeit pro

<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
    <option value="1">Running data</option>
    <option value="2">Rest Data</option>
    <option value="3">All Data</option>
</select>

InformationsquelleAutor Majedur Rahaman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.