Açısal JS kullanarak bir açılır liste denetimi seçili seçeneği nasıl ayarlanır

Açısal JS kullanıyorum ve açısal JS kullanarak açılan liste denetiminin seçili bir seçeneğini ayarlamak gerekir. Bu gülünçse beni affet ama Angular JS'de yeniyim

İşte benim html açılır liste kontrolü

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

Doldurulduktan sonra

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

value="0"Seçilecek kontrolü nasıl ayarlayabilirim ?

Umarım sorunuzu anlarım, ancak ng-modelyönerge kontrolde seçilen öğe ile değeri arasında iki yönlü bir bağlantı oluşturur item.selectedVariant. Bu item.selectedVariant, JavaScript'te veya denetimdeki değeri değiştirmenin diğerini güncellediği anlamına gelir . item.selectedVariantDeğeri varsa 0, bu öğe seçilmelidir.

Bir variantsnesne dizisiyse, item.selectedVariantbu nesnelerden birine ayarlanmalıdır. Kapsamınızda hangi bilgilerin olduğunu bilmiyorum, ama işte bir örnek:

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>

Bu, seçilecek "b" öğesini bırakacaktır.

Bunun kimseye yardım edip etmeyeceğini bilmiyorum ama aynı sorunla karşılaştığımda çözümü nasıl bulduğumu paylaşmayı düşündüm.

İçinde parçaya göre özniteliği kullanabilirsiniz ng-options.

Varsayalım:

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

Sizden şöyle bahsedebilirsiniz ng-options:

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

Umarım bu gelecekte birine yardımcı olur.

Eğer 0 değerini atarsanız, item.selectedVariantotomatik olarak seçilmelidir. Sadece atayarak varsayılan olarak kırmızı rengi seçen http://docs.angularjs.org/api/ng.directive:select adresindeki örneği inceleyin $scope.color='red'.

burada görüyorum zaten iyi cevaplar yazdı, ama bazen aynı şekilde başka şekillerde yazmak yararlı olabilir

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

Basit yol

Yanıt olarak bir Kullanıcı veya tanımladığınız bir Array / JSON varsa, önce Denetleyicide seçilen değeri ayarlamanız gerekir, ardından aynı model adını html'ye koyarsınız. Bu örneği en kolay şekilde açıklamak için yazdım. İç Kontrolör
Basit örneği
:

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

HTML'niz

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

karmaşık örnek
Inside Controller:

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

HTML'niz

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

Yararlı olabilir. Bağlama dozu her zaman işe yaramaz.

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

Örneğin. Seçenek listesi kaynak modelini dinlenme hizmetinden doldurursunuz. Seçilen değer doldurma listesinden önce biliniyordu ve ayarlandı. Geri kalanı istedikten sonra $ http liste seçeneği ile yapılabilir. Ancak seçilen seçenek ayarlanmamış. Bilinmeyen nedenlerden ötürü AngularJS gölge $ digest içinde yürütülürken seçili olarak bağlanmıyor. Seçilenleri ayarlamak için JQuery kullanmalıyım. Bu önemli! Gölgede açısal, ng-tekrarlı opinoslar tarafından üretilen "attr" değeri değerine önek ekler. İnt için "sayı:" dır.

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

Takip etmeyi dene:

JS dosyası

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

HTML dosyası

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

Bu, seçilen set değeri için kullandığım kod

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>

bunu açısal bir çerçeve üzerinde deneyin

JS:

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