Cách đặt tùy chọn đã chọn của điều khiển danh sách thả xuống bằng cách sử dụng JS góc

Tôi đang sử dụng Angular JS và tôi cần đặt một tùy chọn đã chọn của điều khiển danh sách thả xuống bằng cách sử dụng JS góc. Hãy tha thứ cho tôi nếu điều này thật lố bịch nhưng tôi là người mới với Angular JS

Đây là điều khiển danh sách thả xuống của html của tôi

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

Sau khi nó được phổ biến, tôi nhận được

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

Làm cách nào tôi có thể đặt điều khiển value="0"để được chọn?

Tôi hy vọng tôi hiểu câu hỏi của bạn, nhưng ng-modelchỉ thị tạo ra ràng buộc hai chiều giữa mục được chọn trong điều khiển và giá trị của item.selectedVariant. Điều này có nghĩa là thay đổi item.selectedVariantJavaScript hoặc thay đổi giá trị trong điều khiển, cập nhật cái khác. Nếu item.selectedVariantcó giá trị 0, mục đó sẽ được chọn.

Nếu variantslà một mảng các đối tượng, item.selectedVariantphải được đặt thành một trong những đối tượng đó. Tôi không biết bạn có thông tin gì trong phạm vi của mình, nhưng đây là một ví dụ:

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>

Điều này sẽ để lại mục "b" được chọn.

Tôi không biết điều này có giúp được ai hay không nhưng khi tôi đối mặt với cùng một vấn đề, tôi đã nghĩ đến việc chia sẻ làm thế nào tôi có được giải pháp.

Bạn có thể sử dụng theo dõi theo thuộc tính trongng-options .

Giả sử rằng bạn có:

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

Bạn có thể đề cập đến ng-optionsnhư:

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

Hy vọng điều này sẽ giúp ai đó trong tương lai.

Nếu bạn gán giá trị 0 cho item.selectedVariantnó thì nên chọn tự động. Kiểm tra mẫu trên http://docs.angularjs.org/api/ng.directive:select chọn màu đỏ theo mặc định bằng cách chỉ định $scope.color='red'.

Tôi thấy ở đây đã viết câu trả lời tốt, nhưng đôi khi để viết tương tự ở dạng khác có thể hữu ích

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

Cách đơn giản

Nếu bạn có Người dùng là phản hồi hoặc Mảng / JSON bạn đã xác định, Đầu tiên Bạn cần đặt giá trị đã chọn trong bộ điều khiển, sau đó bạn đặt cùng tên mô hình trong html. Ví dụ này tôi đã viết để giải thích một cách dễ dàng nhất.
Ví dụ đơn giản
Bộ điều khiển bên trong:

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

HTML của bạn

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

ví dụ phức tạp
Bộ điều khiển bên trong:

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

HTML của bạn

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

Nó có thể hữu ích. Liều lượng ràng buộc không phải lúc nào cũng làm việc.

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

Ví dụ. Bạn điền tùy chọn danh sách mô hình nguồn từ dịch vụ nghỉ ngơi. Giá trị được chọn đã được biết trước khi điền vào danh sách và đã được đặt. Sau khi thực hiện yêu cầu nghỉ ngơi với tùy chọn danh sách $ http được thực hiện. Nhưng tùy chọn đã chọn không được đặt. Không rõ lý do AngularJS trong bóng tối $ digest thực thi không ràng buộc được chọn vì nó bị che khuất. Tôi phải sử dụng JQuery để thiết lập đã chọn. Nó quan trọng! Angular in Shadow thêm tiền tố vào giá trị của "giá trị" attr để tạo bởi các optinos lặp lại ng. Đối với int nó là "số:".

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

Hãy thử như sau:

Tệp tin JS

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

Tệp 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>

Đây là mã mà tôi đã sử dụng cho giá trị đã chọn

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>

thử cái này trên một khung góc

JS:

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