Невозможно отобразить выбранное значение с помощью select2

Я использую директиву angular-ui select2. С точки зрения функциональности все работает нормально (после некоторого удаления волос), но я только что понял, что то, что я сделал, чтобы заставить его работать, теперь не позволяет select2 отображать выбранное значение.

<select 
    ui-select2
    id="entityDropDown" 
    ng-model="selectedUser"   
    ng-value="users[selectedUser].name"
    ng-change="getUserInfo(users[selectedUser])">
          <option></option>
          <option ng-repeat="user in users" ng-value="{{$index}}" value="{{user.name}}">{{user.name}}</option>
</select>

Сначала я использовал ngOptions, но он не совместим с Select2, поэтому мне пришлось использовать ngRepeat. Мой ngRepeat должен отправить выбранный пользовательский объект в функцию при изменении. Для этого мне пришлось использовать ng-значение или значение, чтобы связать выбранный пользовательский $index с выбранными элементами ng-modal. selectedUser оттуда я мог искать объект в пользователях на основе индекса. BUUUT, теперь, когда я дал моим опциям индекс $, значение, возвращаемое в select2, не имеет смысла, я думаю, а просто дает мне заполнитель.

.run(['uiSelect2Config', function(uiSelect2Config) {
        uiSelect2Config.placeholder = "Click here";
        uiSelect2Config.dropdownAutoWidth = true;
    }]);

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

Источник

2 ответа

Попробуйте переписать HTML к этому:

<select 
    ui-select2
    id="entityDropDown" 
    ng-model="selectedUser"  
    ng-change="getUserInfo(users[selectedUser])">
          <option></option>
          <option ng-repeat="user in users" ng-value="$index">{{user.name}}</option>
</select>

Обратите внимание, что я удалил ng-value от выбора и value атрибут из параметров (я также удалил {{..}} окружающий $index)

selectedUser всегда должно быть целым числом, представляющим индекс в users массив

Источник

На самом деле вы можете использовать jQuery для извлечения индекса выбранной опции, когда "раскрывающийся список сущностей" был изменен. Приведенный ниже пример является простой демонстрацией вашего вопроса.

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>angular ui - select2</title>
  <link rel="stylesheet" href="js/select2/select2.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <div ng-controller="select2Ctrl">
    <select id="entityDropDown" ui-select2 ng-model="selectedUser" data-placeholder="Select a user" ng-change="getUserInfo()">
      <option value=""></option>
      <option ng-repeat="user in users" value="{{user.name}}">{{user.name}}</option>
    </select> VALUE: {{selectedUser}}
    <br/><br/>
    Selected User info:<br/><br/>
    name:
    {{selectedUserData.name}}<br/>
    id:
    {{selectedUserData.id}}
  </div>
  <script src="js/select2/select2.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script src="js/angular-ui-select2/src/select2.js"></script>
  <script src="js/angularUISelect2.js"></script>
</body>
</html>

контроллер

angular.module("myApp",['ui.select2'])
.controller("select2Ctrl",function($scope){
  $scope.selectedUser = "";
  $scope.selectedUserData = {};
  $scope.users = [{id:1,name:"user1"},{id:2,name:"user2"}];

  $scope.getUserInfo = function(){
    $scope.selectedUserData = $scope.users[jQuery("#entityDropDown")[0].selectedIndex-1];
  };
});

Скриншот

(1) до выбора

(2) выбор

(3) после выбора

Надеюсь, это полезно.

Источник
Другие вопросы по тегам