Cara mengatur opsi yang dipilih dari kontrol daftar dropdown menggunakan JS sudut


139

Saya menggunakan JS Angular dan saya perlu mengatur opsi yang dipilih dari kontrol daftar dropdown menggunakan JS sudut. Maafkan saya jika ini konyol tapi saya baru dengan Angular JS

Berikut adalah kontrol daftar dropdown html saya

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

Setelah itu dihuni saya dapatkan

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

Bagaimana saya bisa mengatur kontrol untuk value="0"dipilih?


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

Jawaban:


191

Saya harap saya mengerti pertanyaan Anda, tetapi ng-modelarahan menciptakan ikatan dua arah antara item yang dipilih dalam kontrol dan nilai item.selectedVariant. Ini berarti bahwa mengubah item.selectedVariantJavaScript, atau mengubah nilai dalam kontrol, memperbarui yang lain. Jika item.selectedVariantmemiliki nilai 0, item itu harus dipilih.

Jika variantsarray objek,item.selectedVariant harus diatur ke salah satu objek tersebut. Saya tidak tahu informasi mana yang Anda miliki di ruang lingkup Anda, tetapi inilah sebuah contoh:

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>

Ini akan membiarkan item "b" dipilih.


Saya memiliki file pengontrol bernama order.js, sehingga nama html sama dengan order.html tempat kontrolnya. Haruskah saya menetapkan Varian yang dipilih di sana atau langsung pada kontrol?
themhz

Biasanya Anda akan mengatur hal-hal ini di controller, pada $scopevariabel. Jadi dengan asumsi Anda berada dalam satu lingkup, di controller Anda, Anda bisa mengatakan $scope.item.selectedVariant = 0, untuk menetapkan nilai yang dipilih default. Anda juga dapat mengatur variabel langsung pada kontrol, dalam HTML, menggunakan arahan ng-init , tapi itu menjadi agak berantakan menurut saya!
Steve Klösters

Bisakah Anda menguraikan apa yang variantsada di ruang lingkup Anda? Anda harus menetapkan item.selectedVarianttepat ke item variants.
Steve Klösters

$ scope.item.selectedVariant = 0; ini akan memecah halaman jika saya memasukkannya ke file controler
themhz

bisakah Anda memberikan sintaks menggunakan ng-init?
themhz

34

Saya tidak tahu apakah ini akan membantu seseorang atau tidak, tetapi karena saya menghadapi masalah yang sama, saya berpikir untuk berbagi bagaimana saya mendapatkan solusinya.

Anda dapat menggunakan trek menurut atribut ding-options .

Asumsikan bahwa Anda memiliki:

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

Anda bisa menyebut Anda ng-optionssebagai:

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

Semoga ini bisa membantu seseorang di masa depan.


Iya! akhirnya! Terima kasih
davaus

Bagus. Saya melewatkan trek demi melakukan ini secara dinamis.
John

Akhirnya! Masalah saya diselesaikan dengan meletakkan trek. Terima kasih
Kishan

Ini yang saya lewatkan! Saya menetapkan bidang lingkup yang terikat dengan ngModelbenar, tetapi tidak berfungsi sampai saya menambahkan track by! Terima kasih!
Cindy K.

7

Jika Anda menetapkan nilai 0 untuk item.selectedVariantitu harus dipilih secara otomatis. Lihat sampel di http://docs.angularjs.org/api/ng.directive:select yang memilih warna merah secara default dengan hanya menetapkan $scope.color='red'.


di mana saya mengatur item.selectedVariant? jika saya mendefinisikan $ scope.item.selectedVariant = 0; di
pengontrol

3
bisakah Anda juga menempelkan html yang cocok?
Tadeusz Wójcik

Saya pikir setiap item di orderGrid harus memilihVariant yang diatur ke 0
Tadeusz Wójcik

dapatkah Anda memberikan kode sampel? Saya tidak akrab dengan maaf sudut
themhz

7

saya lihat di sini sudah menulis jawaban yang baik, tetapi kadang-kadang menulis yang sama dalam bentuk lain dapat membantu

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

Bagaimana jika saya memiliki drop down yang multi pilih. Cukup mengatur id dalam model tidak bekerja
Nikhil Sahu

2

Cara sederhana

Jika Anda memiliki Pengguna sebagai respons atau Array / JSON yang Anda tentukan, Pertama, Anda harus menetapkan nilai yang dipilih di controller, kemudian Anda memasukkan nama model yang sama dalam html. Contoh ini saya tulis untuk menjelaskan dengan cara termudah.
Contoh sederhana di
dalam Pengontrol:

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

HTML Anda

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

contoh kompleks
Di Dalam Pengontrol:

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

HTML Anda

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

1

Ini bisa bermanfaat. Dosis binding tidak selalu bekerja.

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

Sebagai contoh. Anda mengisi model sumber daftar opsi dari layanan lainnya. Nilai yang dipilih diketahui sebelum daftar pengisian dan ditetapkan. Setelah menjalankan rest-request dengan opsi daftar $ http dilakukan. Tetapi opsi yang dipilih tidak diatur. Dengan alasan yang tidak diketahui AngularJS di shadow $ digest mengeksekusi tidak mengikat dipilih seperti yang seharusnya. Saya harus menggunakan JQuery untuk mengatur yang dipilih. Itu penting! Angular in shadow menambahkan awalan ke nilai attr "value" untuk dihasilkan oleh ng-repeat optinos. Untuk int itu adalah "nomor:".

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

0

Coba yang berikut ini:

File JS

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

File HTML

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

Sudah ada solusi yang baik, yang berfungsi dan telah diterima oleh OP yang memecahkan masalahnya.
L. Guthardt

0

Ini adalah kode yang saya gunakan untuk menetapkan nilai yang dipilih

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>

coba ini pada kerangka sudut


0

JS:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.