Jak ustawić wybraną opcję kontrolki listy rozwijanej za pomocą kątowego JS

139

Używam Angular JS i muszę ustawić wybraną opcję kontrolki listy rozwijanej za pomocą kątowego JS. Wybacz mi, jeśli to śmieszne, ale jestem nowy w Angular JS

Oto rozwijana lista kontrolna mojego 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>

Po zapełnieniu otrzymuję

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

Jak mogę ustawić kontrolkę value="0"do wybrania?

themhz
źródło
5
<option value="0" ng-selected="true">set of 6 traits</option>
Muhammad Shahzad,

Odpowiedzi:

191

Mam nadzieję, że rozumiem Twoje pytanie, ale ng-modeldyrektywa tworzy dwustronne powiązanie między wybranym elementem w kontroli a wartością item.selectedVariant. Oznacza to, że zmiana item.selectedVariantw JavaScript lub zmiana wartości w kontrolce aktualizuje drugą. Jeśli item.selectedVariantma wartość 0, ten element powinien zostać wybrany.

Jeśli variantsjest tablicą obiektów, item.selectedVariantnależy ustawić na jeden z tych obiektów. Nie wiem, jakie informacje masz w swoim zakresie, ale oto przykład:

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>

To pozostawiłoby element „b” do wyboru.

Steve Klösters
źródło
Mam plik kontrolny o nazwie order.js, więc nazwa html jest taka sama, jak order.html, gdzie znajduje się kontrolka. Czy powinienem ustawić selectedVariant tam czy bezpośrednio na kontrolce?
themhz
Zwykle ustawia się te rzeczy w kontrolerze, na $scopezmiennej. Zakładając więc, że znajdujesz się w jednym zakresie, możesz powiedzieć $scope.item.selectedVariant = 0, że w kontrolerze ustawisz domyślną wybraną wartość. Możesz także ustawić zmienną bezpośrednio w kontrolce, w HTML, używając dyrektywy ng-init , ale moim zdaniem robi się to dość niechlujne!
Steve Klösters
Czy mógłbyś wyjaśnić, co variantsjest w twoim zakresie? Musiałbyś ustawić item.selectedVariantdokładnie na element variants.
Steve Klösters
$ scope.item.selectedVariant = 0; spowoduje to zerwanie strony, jeśli umieszczę ją w pliku
kontrolera
czy możesz podać składnię używając ng-init?
themhz
34

Nie wiem, czy to komuś pomoże, czy nie, ale ponieważ miałem ten sam problem, pomyślałem, aby podzielić się tym, w jaki sposób uzyskałem rozwiązanie.

Możesz użyć atrybutu śledzenia według w swoim ng-options.

Załóżmy, że masz:

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

Możesz wspomnieć o swoim ng-optionsjako:

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

Mam nadzieję, że to pomoże komuś w przyszłości.

jsmtslch
źródło
Tak! Wreszcie! Dziękuję
davaus
Wspaniały. Brakowało mi utworu, aby to zrobić dynamicznie.
John
Wreszcie! Mój problem został rozwiązany przez dodanie śledzenia. Dziękuję
Kishan
Tego mi brakowało! Ustawiałem pole zakresu, które było powiązane ngModelpoprawnie, ale nie działało, dopóki nie dodałem track by! Dziękuję Ci!
Cindy K.
7

Jeśli przypiszesz wartość 0 item.selectedVariant, powinna zostać wybrana automatycznie. Sprawdź przykład na http://docs.angularjs.org/api/ng.directive:select, który domyślnie wybiera czerwony kolor, po prostu przypisując $scope.color='red'.

Tadeusz Wójcik
źródło
gdzie ustawić item.selectedVariant? jeśli zdefiniuję $ scope.item.selectedVariant = 0; w
kontrolerze pilnika
3
czy możesz też wkleić pasujący html?
Tadeusz Wójcik
Myślę, że każda pozycja w kolejności Siatka musi mieć wybraną Wariant ustawioną na 0
Tadeusz Wójcik
czy możesz podać przykładowy kod? Nie jestem zaznajomiony z
angular
7

Widzę, że napisałem już dobre odpowiedzi, ale czasami napisanie tego samego w innej formie może być pomocne

<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>
Arthur Tsidkilov
źródło
Co by było, gdybym miał listę rozwijaną z wyborem wielokrotnym. Samo ustawienie identyfikatorów w modelu nie działa
Nikhil Sahu
2

Prosta droga

Jeśli masz użytkowników jako odpowiedź lub zdefiniowaną tablicę / JSON, najpierw musisz ustawić wybraną wartość w kontrolerze, a następnie umieścić tę samą nazwę modelu w html. Ten przykład napisałem, aby wyjaśnić w najprostszy sposób.
Prosty przykład
kontrolera wewnętrznego:

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

Twój kod HTML

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

złożony przykład
Inside Controller:

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

Twój kod HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>    
shreedhar bhat
źródło
1

Może się przydać. Wiązania nie zawsze działają.

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

Na przykład. Wypełniasz listę opcji modelu źródłowego z usługi rest-service. Wybrana wartość była znana przed wypełnieniem listy i została ustawiona. Po wykonaniu żądania ponownego uruchomienia z opcją listy $ http należy wykonać. Ale wybrana opcja nie jest ustawiona. Z nieznanych powodów AngularJS w shadow $ Digest nie wykonuje wiązania wybranego tak, jak powinno. Muszę użyć JQuery, aby ustawić wybrane. To ważne! Kątowy w cieniu dodaje prefiks do wartości attr „value” dla wygenerowania przez ng-repeat optinos. Dla int jest to „liczba:”.

$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);
       }
   });
}
trueboroda
źródło
0

Spróbuj wykonać następujące czynności:

Plik JS

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

Plik 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>
Asha Joshi
źródło
Istnieje już dobre rozwiązanie, które działa i zostało zaakceptowane przez OP, że rozwiązuje jego problem.
L. Guthardt
0

To jest kod jakiego użyłem dla ustawionej wybranej wartości

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>

wypróbuj to na kątowej ramie

Dinesh Nisshanka
źródło
0

JS:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];
Snehal S
źródło