각도 JS를 사용하여 드롭다운 리스트 컨트롤의 선택된 옵션을 설정하는 방법

각도 JS를 사용하여 드롭다운 리스트 컨트롤의 선택된 옵션을 설정하는 방법

Angular JS를 사용하고 있으며 Angular JS를 사용하여 드롭다운 목록 컨트롤의 선택된 옵션을 설정해야 합니다.어처구니없다면 용서해주십시오만, 저는 Angular JS에 익숙하지 않습니다.

여기 내 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>

사람이 몰린 후에 나는 얻는다.

 <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"뽑힐까?

제가 당신의 질문을 이해했으면 합니다만,ng-model디렉티브는 컨트롤에서 선택한 항목과 값 사이에 양방향 바인딩을 만듭니다.item.selectedVariant즉, 변경은item.selectedVariant는 JavaScript에서 또는 컨트롤에서 값을 변경하면 다른 값을 업데이트합니다.한다면item.selectedVariant의 가치가 있다0, 그 아이템이 선택됩니다.

한다면variants오브젝트 배열입니다.item.selectedVariant이러한 객체 중 하나로 설정해야 합니다.범위 내에 어떤 정보가 포함되어 있는지 알 수 없지만, 예를 들어 다음과 같습니다.

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>

그러면 "b" 항목이 선택됩니다.

이것이 도움이 될지 어떨지는 모르겠지만, 같은 문제에 직면해 있기 때문에, 어떻게 해결책을 얻을 수 있었는지에 대해 공유하려고 생각하고 있습니다.

속성에 의한 트랙을 사용하여ng-options.

다음과 같이 가정합니다.

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

다음 중 하나를 언급할 수 있습니다.ng-options다음과 같이 합니다.

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

이것이 미래에 누군가에게 도움이 되기를 바랍니다.

값 0을 할당한 경우item.selectedVariant자동으로 선택되어야 합니다.http://docs.angularjs.org/api/ng.directive:select에서 샘플을 확인하세요.이 샘플은 단순히 할당만 하면 기본적으로 빨간색이 선택됩니다.$scope.color='red'.

여기 보니까 이미 좋은 답변을 써놨는데, 가끔은 다른 형식으로 써보는 것도 도움이 될 수 있어요.

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

간단한 방법

사용자 응답 또는 어레이/J가 있는 경우정의한 SON, 먼저 컨트롤러에서 선택한 값을 설정한 후 동일한 모델 이름을 html로 입력해야 합니다.이 예는 내가 가장 쉽게 설명하기 위해 쓴 것이다.
간단한 예
내부 컨트롤러:

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

HTML

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

복잡한 예
내부 컨트롤러:

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

HTML

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

유용하게 쓸 수 있다.바인딩이 항상 기능하는 것은 아닙니다.

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

예를들면.rest-service에서 옵션 목록 소스 모델을 채웁니다.선택한 값은 목록 채우기에 대해 알려졌으며 설정되었습니다.$http list 옵션을 사용하여 rest-request를 실행한 후 실행됩니다.그러나 선택한 옵션이 설정되지 않았습니다.알 수 없는 이유로 각도섀도 $digest 실행 중인 JS는 should be로 바인드를 선택하지 않았습니다.JQuery를 사용하여 선택 항목을 설정해야 합니다.중요한 일이야!ng-repeat optinos에 의해 생성된 특성 "값" 값에 그림자가 각진 접두사를 추가합니다.int의 경우 "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);
       }
   });
}

다음을 시도해 보십시오.

JS 파일

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

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>

선택한 값 집합에 사용한 코드입니다.

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>

각진 틀에서 이것을 시도하다

JS:

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

언급URL : https://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js