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

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?

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

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

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>

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>    

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

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>

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

JS:

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