Ich bin neu bei AngularJS. Ich habe viel gesucht, aber es löst mein Problem nicht.
Ich erhalte zum ersten Mal eine leere Option im Auswahlfeld.
Hier ist mein HTML-Code
<div ng-app="MyApp1">
<div ng-controller="MyController">
<input type="text" ng-model="feed.name" placeholder="Name" />
<select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select>
</div>
</div>
JS
var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
$scope.feed = {};
//Configuration
$scope.configs = [
{'name': 'Config 1',
'value': 'config1'},
{'name': 'Config 2',
'value': 'config2'},
{'name': 'Config 3',
'value': 'config3'}
];
//Setting first option as selected in configuration select
$scope.feed.config = $scope.configs[0].value;
});
Aber es scheint nicht zu funktionieren. Wie kann ich das lösen? Hier ist die JSFiddle-Demo
quelle
configs
von$scope
zu$scope.feed
notwendig?Während alle oben genannten Vorschläge funktionieren, muss ich manchmal eine leere Auswahl (mit Platzhaltertext) haben, wenn ich meinen Bildschirm zum ersten Mal betrete. Um zu verhindern, dass das Auswahlfeld diese leere Auswahl am Anfang (oder manchmal am Ende) meiner Liste hinzufügt, verwende ich diesen Trick:
HTML Quelltext
<div ng-app="MyApp1"> <div ng-controller="MyController"> <input type="text" ng-model="feed.name" placeholder="Name" /> <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config"> <option value="" selected hidden /> </select> </div> </div>
Jetzt haben Sie diese leere Option definiert, sodass das Auswahlfeld zufrieden ist, Sie es jedoch ausgeblendet lassen.
quelle
Hier ist eine aktualisierte Geige: http://jsfiddle.net/UKySp/
Sie mussten Ihren anfänglichen Modellwert auf das tatsächliche Objekt festlegen:
$scope.feed.config = $scope.configs[0];
Und aktualisieren Sie Ihre Auswahl so, dass sie so aussieht:
<select ng-model="feed.config" ng-options="item.name for item in configs">
quelle
Eine andere zu lösende Methode ist die Verwendung von:
$first
inng-repeat
Verwendung:
<select ng-model="feed.config"> <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option> </select>
Referenzen :
ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected
$ first : https://docs.angularjs.org/api/ng/directive/ngRepeat
Prost
quelle
Es gibt mehrere Möglichkeiten wie -
<select ng-init="feed.config = options[0]" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> </select>
Oder
$scope.feed.config = $scope.configs[0].name;
quelle
Es ist eine Art Problemumgehung, funktioniert aber wie ein Zauber. Einfach
<option value="" style="display: none"></option>
als Füllstoff hinzufügen . Wie in:<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs"> <option value="" style="display: none"></option> </select>
quelle
Wenn Sie nur die Leerstelle entfernen möchten, verwenden Sie ng-show und Sie sind fertig! Es ist nicht erforderlich, den Wert in JS zu initialisieren.
<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList"> <option value="" ng-show="false"></option> </select>`
quelle
Ändern Sie Ihren Code so. Sie vergessen den Wert innerhalb der Option. Bevor Sie das ng-Modell zuweisen. Es muss einen Wert haben. Nur dann erhält es nicht den undefinierten Wert.
<div ng-app="MyApp1"> <div ng-controller="MyController"> <input type="text" ng-model="feed.name" placeholder="Name" /> <select ng-model="feed"> <option ng-repeat="template in configs" value="template.value">{{template.name}} </option> </select> </div> </div>
JS
var MyApp=angular.module('MyApp1',[]) MyApp.controller('MyController',function($scope) { $scope.feed = 'config1'; $scope.configs = [ {'name': 'Config 1', 'value': 'config1'}, {'name': 'Config 2', 'value': 'config2'}, {'name': 'Config 3', 'value': 'config3'} ]; });
quelle
Verwenden Sie ng-value anstelle von value .
$scope.allRecs = [{"text":"hello"},{"text":"bye"}]; $scope.X = 0;
und dann in HTML-Datei sollte wie sein:
<select ng-model="X"> <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option> </select>
quelle
Für mich war die Antwort auf diese Frage so,
<option value="" selected hidden />
wie sie von @RedSparkle vorgeschlagen wurde, und das Hinzufügenng-if="false"
zur Arbeit im IE.Meine volle Option ist also (hat Unterschiede zu dem, was ich zuvor geschrieben habe, aber das spielt wegen ng-if keine Rolle):
<option value="" ng-if="false" disabled hidden></option>
quelle
Endlich hat es bei mir geklappt.
<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel"> <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option> </select>
quelle
Überprüfen Sie auch, ob Sie einen falschen Wert haben oder nicht. Angularjs fügt eine leere Option ein, wenn Sie einen falschen Wert haben. Ich kämpfte 2 Tage lang nur wegen des falschen Wertes. Ich hoffe es wird für jemanden hilfreich sein.
Ich hatte Optionen als [0, 1] und anfangs wurde das Modell auf 0 gesetzt, da eine leere Option eingefügt wurde. Problemumgehung hierfür war ["0", "1"].
quelle