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

Я использую директиву select2 с угловым 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, но он не совместим с выбор2, так что я должен был использовать ngRepeat. Моему ngRepeat необходимо отправить выбранный пользовательский объект в функцию при изменении. Для этого мне пришлось использовать ng-значение или значение, чтобы привязать выбранный пользовательский индекс $ к элементам выбора ng-modal selectedUser, откуда я мог искать объект у пользователей на основе индекса. BUUUT, теперь я дал свои параметры $ index, значение, возвращаемое select2, не имеет смысла, я думаю, и это просто дает мне место.

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

Я пытался давая выбрать элемент своих собственных нг-значение рода делать то, что делает ngChange и просмотр выбранных пользователей имени .... но да, что ничего не вышли.

источник

2014-02-07 Batman

На самом деле вы можете использовать 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]; 
    }; 
});

ScreenShot

(1) перед выбором

enter image description here

(2) выбор

enter image description here

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

enter image description here

Надежда это полезно.

источник

2014-02-07 10:10:32 Chickenrice

А я думаю, я понимаю, что вы делаете. Вы в основном перемещаете все вычисления внутри контроллера, чтобы он не влиял на значение select2 правильно? Имеет смысл. – Batman

Я попробовал, но по какой-то кровавой причине он все еще не появится с select2: http://jsfiddle.net/Ay7jA/ Я сделал это неправильно? – Batman

jQuery работает только в первый раз, когда я меняю пользователей, он не работает. – Batman

Попробуйте переписывание 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

источник

2014-02-07 14:52:30 qwertynl

Я внес изменения, но это не сработало. Я делаю плункер, я сомневаюсь, что plunker будет работать, но у него будет достаточно кода. – Batman

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

ответ

Смежные вопросы