Значения select2 не меняются на угловой модели изменены

я не могу изменить выбранные значения внутри select2 в моем контроллере.

<select id="drptabselect" ng-model="selectedTab" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>

у меня есть вызов ajax, где data.Tab возвращается следующим образом

$scope.selectedTab = data.Tab;

Результат вкладки ajax, как показано ниже

"Tab": {
"$id": "2",
"ID": 4,
"Title": "FirstTab"
},

если я попытаюсь распечатать

<span>{{selectedTab}}</span>

он дает ожидаемое значение после assignmnet как

{"$id": "2","ID": "4","Title": "FirstTab"}

К сожалению, то же самое не применяется к раскрывающемуся списку select2. там он все еще показывает последнее выбранное значение. Как также заполнить значение в раскрывающемся списке?

мой $scope.tabnames выглядит так

[{"$id": "1",
"ID": 4,
"Title": "FirstTab"
},
{"$id": "2",
"ID": 5,
"Title": "Secondtab"
},
{"$id": "3",
"ID": 6,
"Title": "Thirdtab"
}]

я использую обычную библиотеку select2 (не angualr-ui)


angularjs angular-ui-select select2
person user3815413    schedule 23.11.2016    source источник
comment
Можете ли вы воспроизвести проблему на plunker?   -  person Sunil Lama    schedule 23.11.2016
comment
plnkr.co/edit/pJQBfQQ5cA9msc6fXErp здесь select2 не работает, но такая же проблема существует для выбора надежды, если это можно исправить, это даст ответ на мое решение.. в основном заполнение значения выбора внутри контроллера   -  person user3815413    schedule 23.11.2016
comment
Привет, проверьте мой ответ, если это поможет вам.   -  person Sunil Lama    schedule 24.11.2016
comment
Мой select2 был внутри контроллера, я не вижу никакого решения в вашем коде.   -  person user3815413    schedule 26.11.2016

Ответы (2)


arrow_upward
1
arrow_downward

Одна из проблем Angular JS при работе с ngModel — использовать точечная нотация, пройдя еще один уровень (см. также это объяснение). Пытаться :

$scope.controllerData.selectedTab = data.Tab;
$scope.controllerData.tabnames = ...

controllerData — это просто произвольное имя, вы можете выбрать то, что вам нужно.

Кроме того, есть ли особая причина для того, чтобы имена вкладок были массивом с одной записью и содержащими объекты?

person Christian Bonato    schedule 23.11.2016
comment
Привет, Кристиан Бонато. Спасибо за подсказку. Не могли бы вы рассказать подробнее о controllerData? Мой идентификатор selectedTab объявляет корневой уровень dat как $scope.selectedTab = [] о том, почему имена вкладок являются массивом. Вот как отвечает ajax, в этом остальном обновлении данных управления вводом текста отлично работает с такими операторами, как $scope.Title = data. Заголовок; проблема только в раскрывающемся списке select2, { Title: Usersname, ControlName: txtUsersname, Tab: { $ id: 3, ID: 4, Title: FirstTab},} - person user3815413; 23.11.2016
comment
здесь select2 не работает, но такая же проблема существует для надежды выбора, если это можно исправить, это даст ответ на мое решение ... в основном заполнение значения выбора внутри контроллера - - person user3815413; 23.11.2016
comment
плункер находится здесь: plnkr.co/edit/pJQBfQQ5cA9msc6fXErp - person user3815413; 24.11.2016

arrow_upward
0
arrow_downward

У вас была вкладка select2 вне определения контроллера, я думаю, что это проблема.

<!DOCTYPE html>
<html>

  <head>
   <link data-require="[email protected]" data-semver="4.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />

    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="angular.min.js"></script>
    <script src="script.js"></script>
    <script src="select2.full.js"></script>


  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div>
{{message}}
                  <br />
      <select id="drptabselect" ng-model="selectedTab" class="form-control select2" ng-options="x.Title for x in tabnames"></select>
    </div>
      <input type="button" ng-click="setselect()" value="set select2">
  </body>



 {{selectedTab}}

</html>
person Sunil Lama    schedule 24.11.2016