So legen Sie eine ausgewählte Option eines Dropdown-Listensteuerelements mit eckigem JS fest

139

Ich verwende Angular JS und muss eine ausgewählte Option eines Dropdown-Listensteuerelements mit Angular JS festlegen. Vergib mir, wenn das lächerlich ist, aber ich bin neu bei Angular JS

Hier ist die Dropdown-Listensteuerung meines HTML

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

Nachdem es besiedelt ist, bekomme ich

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

Wie kann ich das Steuerelement für value="0"die Auswahl einstellen ?

themhz
quelle
5
<option value="0" ng-selected="true">set of 6 traits</option>
Muhammad Shahzad

Antworten:

191

Ich hoffe, ich verstehe Ihre Frage, aber die ng-modelDirektive schafft eine wechselseitige Bindung zwischen dem ausgewählten Element im Steuerelement und dem Wert von item.selectedVariant. Dies bedeutet, dass durch Ändern item.selectedVariantin JavaScript oder Ändern des Werts im Steuerelement der andere aktualisiert wird. Wenn item.selectedVariantder Wert " 0ist", sollte dieses Element ausgewählt werden.

Wenn variantses sich um ein Array von Objekten handelt, item.selectedVariantmuss eines dieser Objekte festgelegt werden. Ich weiß nicht, welche Informationen Sie in Ihrem Bereich haben, aber hier ist ein Beispiel:

JS:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

Dies würde das Element "b" zur Auswahl lassen.

Steve Klösters
quelle
Ich habe eine Steuerungsdatei mit dem Namen order.js, daher der HTML-Name dieselbe order.html, in der sich das Steuerelement befindet. Soll ich die ausgewählte Variable dort oder direkt auf dem Steuerelement einstellen?
Themhz
Normalerweise würden Sie diese Dinge in der Steuerung auf die $scopeVariable setzen. Wenn Sie sich also in einem einzigen Bereich befinden, können Sie in Ihrem Controller sagen $scope.item.selectedVariant = 0, dass Sie den ausgewählten Standardwert festlegen. Sie können die Variable auch direkt auf dem Steuerelement in HTML mithilfe der ng-init- Direktive festlegen , aber das wird meiner Meinung nach ziemlich chaotisch!
Steve Klösters
Könnten Sie näher erläutern, was variantsin Ihrem Anwendungsbereich liegt? Sie müssten item.selectedVariantgenau auf einen Artikel von einstellen variants.
Steve Klösters
$ scope.item.selectedVariant = 0;
Dadurch
Können Sie die Syntax bitte mit ng-init angeben?
Themhz
34

Ich weiß nicht, ob dies irgendjemandem helfen wird oder nicht, aber da ich vor dem gleichen Problem stand, dachte ich darüber nach, zu teilen, wie ich zu der Lösung gekommen bin.

Sie können track by attribute in Ihrem verwenden ng-options.

Angenommen, Sie haben:

variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]

Sie können Ihre ng-optionsals erwähnen :

ng-options="v.name for v in variants track by v.id"

Hoffe das hilft jemandem in Zukunft.

jsmtslch
quelle
Ja! endlich! Vielen Dank
Davaus
Toll. Ich habe den Track verpasst, um dies dynamisch zu tun.
John
Schließlich! Mein Problem wurde gelöst, indem ich den Track durchlegte. Vielen Dank
Kishan
Das hat mir gefehlt! Ich habe das Bereichsfeld festgelegt, an das ngModelrichtig gebunden war , aber es hat nicht funktioniert, bis ich das track by! Danke dir!
Cindy K.
7

Wenn Sie ihm den Wert 0 zuweisen, item.selectedVariantsollte dieser automatisch ausgewählt werden. Schauen Sie sich das Beispiel unter http://docs.angularjs.org/api/ng.directive:select an, bei dem standardmäßig die rote Farbe durch einfaches Zuweisen ausgewählt wird $scope.color='red'.

Tadeusz Wójcik
quelle
Wo setze ich die item.selectedVariant? wenn ich $ scope.item.selectedVariant = 0 definiere; im
Controller
3
Könntest du auch passendes HTML einfügen?
Tadeusz Wójcik
Ich denke, jedes Element in orderGrid muss ausgewählt habenVariant auf 0 gesetzt
Tadeusz Wójcik
Können Sie einen Beispielcode angeben? Ich bin nicht vertraut mit eckigen Entschuldigung
themhz
7

Ich sehe hier bereits gute Antworten geschrieben, aber manchmal kann es hilfreich sein, dasselbe in anderer Form zu schreiben

<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>
Arthur Tsidkilov
quelle
Was wäre, wenn ich ein Dropdown-Menü hätte, das mehrfach ausgewählt wurde? Das einfache Einstellen der IDs im Modell funktioniert nicht
Nikhil Sahu
2

Einfacher Weg

Wenn Sie einen Benutzer als Antwort oder ein von Ihnen definiertes Array / JSON haben, müssen Sie zuerst den ausgewählten Wert im Controller festlegen und dann denselben Modellnamen in HTML eingeben. Dieses Beispiel habe ich geschrieben, um es auf einfachste Weise zu erklären.
Einfaches Beispiel
Inside Controller:

$scope.Users = ["Suresh","Mahesh","Ramesh"]; 
$scope.selectedUser = $scope.Users[0];

Ihr HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>

komplexes Beispiel
Inside Controller:

$scope.JSON = {
       "ResponseObject":
           [{
               "Name": "Suresh",
               "userID": 1
           },
           {
               "Name": "Mahesh",
               "userID": 2
           }]
   };
   $scope.selectedUser = $scope.JSON.ResponseObject[0];

Ihr HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>    
Shreedhar Bhat
quelle
1

Es kann nützlich sein. Bindungen funktionieren nicht immer.

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products">
</select>

Beispielsweise. Sie füllen das Quellmodell der Optionsliste aus dem Rest-Service. Der ausgewählte Wert war vor dem Füllen der Liste bekannt und wurde eingestellt. Nach dem Ausführen der Rest-Anfrage mit $ http Liste Option durchgeführt werden. Die ausgewählte Option ist jedoch nicht festgelegt. Aus unbekannten Gründen wird AngularJS in Shadow $ Digest ausgeführt und nicht so ausgewählt, wie es sein soll. Ich muss JQuery verwenden, um die Auswahl festzulegen. Es ist wichtig! Winkel im Schatten Präfix zum Wert von attr "Wert" für durch ng-repeat Optinos erzeugte hinzufügen. Für int ist es "number:".

$scope.issue.productId = productId;
function activate() {
   $http.get('/product/list')
     .then(function (response) {
       $scope.products = response.data;

       if (productId) {
           console.log("" + $("#product option").length);//for clarity                       
           $timeout(function () {
               console.log("" + $("#product option").length);//for clarity
               $('#product').val('number:'+productId);
               //$scope.issue.productId = productId;//not work at all
           }, 200);
       }
   });
}
Trueboroda
quelle
0

Versuche Folgendes:

JS-Datei

this.options = { 
        languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);

HTML-Datei

<div class="form-group col-sm-6">
    <label>Preferred language</label>
    <select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
    </select>
</div>
Asha Joshi
quelle
Es gibt bereits eine gute Lösung, die funktioniert und von OP akzeptiert wurde, dass sie sein Problem löst.
L. Guthardt
0

Dies ist der Code, den ich für den eingestellten ausgewählten Wert verwendet habe

countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
 
 
 for (var j = 0; j < countryList.length; j++) {
      //debugger
      if (countryList[j].text == "Australia") {
          console.log(countryList[j].text); 
          countryList[j].isSelected = 'selected';
      }
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country"   >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}"   > {{country.text}}</option>
</select>

Versuchen Sie dies auf einem eckigen Rahmen

Dinesh Nisshanka
quelle
0

JS:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];
Snehal S.
quelle