Метка выбора 2 не изменяется с помощью Angularjs - PullRequest
Новая
       23

Метка выбора 2 не изменяется с помощью Angularjs

0 голосов
/ 26 июня 2019

HTML 

<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
    <option value=''>Select Country</option>
    <option ng-repeat="Country in AllCountry"
            ng-value="[[Country.CountryID]]"
            value="[[Country.CountryID]]">[[Country.CountryName]]
    </option>
</select>

Angulajs 

$scope.Country=23;

Проблема

Когда язапустите этот код, значение будет выбрано, но метка не изменилась, я прикрепил снимок экрана.

enter image description here

Ответы [ 3 ]

1 голос
/ 26 июня 2019

Проблема возникает, когда angularjs сравнивает ваше значение Country с атрибутом value внутри <option>, то есть <option value="Country.CountryID">.Country - это число, а значения опции - string.Короче говоря, проблема связана с несовпадением типов.

В документации говорится, что

Когда модель необходимо связать со нестроковым значением,вы должны либо явно преобразовать его, используя директиву (см. пример ниже), либо использовать ngOptions, чтобы указать набор опций.Это связано с тем, что в настоящее время элемент option может быть привязан только к строковым значениям.

Таким образом, вы можете использовать ngOptions для решения проблемы, как вы можете видеть в прикрепленном фрагменте кода. 

<select name="mySelect" id="mySelect"
  ng-options="option.CountryID as option.CountryName for option in AllCountry" ng-model="Country">
</select>
0 голосов
/ 27 июня 2019

HTML 

<ui-select ng-model="CountryScope.selected" theme="bootstrap">
    <ui-select-match placeholder="Select or search a person in the list...">[[$select.selected.CountryName]]</ui-select-match>
    <ui-select-choices  repeat="Country in (AllCountry | filter: $select.search) track by Country.CountryID">
       <div ng-bind-html="Country.CountryName | highlight: $select.search"></div>
       <small ng-bind-html="Country.CountryName | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

AngularJS 

$scope.AllCountry=[
        {  CountryID: 1, CountryName: 'United States' },
        {  CountryID: 2,  CountryName: 'Argentina' },
        {  CountryID: 3,   CountryName: 'Argentina' }
      ];

для установки значения 

$scope.CountryScope.selected= { CountryID: 2,  CountryName: 'Argentina' };

Чтобы получить значение 

$scope.CountryScope.selected.CountryID

Нажмите здесь для ДЕМО

Нажмите для Ссылка

0 голосов
/ 26 июня 2019

Используйте ng-option вместо опции с ng-repeat ... 

<select ng-model="Country" id="Country" class="select2" ng-change="viewState()">
    <option value=''>Select Country</option>
    <option ng-repeat="Country in AllCountry"
            ng-value="Country.CountryID"
            value="{{Country.CountryID}}">{{Country.CountryName}}
    </option>
</select>

Пожалуйста, используйте угловой {{}} вместо [[]] для привязки .... Надеюсь, он будет работать дляВы 

$scope.Country=22;
    $scope.AllCountry = {
    "India": {
        "CountryName":"India",
        "CountryID": 1
    },
    "USA": {
        "CountryName":"USA",
        "CountryID": 22
    },
    "USR": {
    "CountryName":"USR",
        "CountryID": 2
    }
...