Can't display selected value using select2

Question

I'm using angular-ui's select2 directive. In terms of functionality it's working fine (after some hair pulling) but I just realized that what I did to make it work is now preventing select2 from displaying the selected value.

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

At first I was using ngOptions, but it isn't compatible with Select2 so I had to use ngRepeat. My ngRepeat needs to send the selected user Object to a function on change. To accomplish this I had to use ng-value or value to bind the selected user $index to the select elements ng-modal selectedUser from there I could look up the object in users based on the index. BUUUT, now that's I've given my options the $index, the value returned to select2 doesn't make sense I guess and it's just giving me my place holder.

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

I tried giving the select element it's own ng-value to kind of do what the ngChange was doing and look up the selected users name....but yea that didn't work out.

Chickenrice · Answer 1 · 2014-02-07T10:18:25.160

Actually you could leverage jQuery to fetch the selected option index when the 'entity drop down' has been changed. The example below is a simple demo for your question.

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>

Controller

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) before selection

enter image description here

(2) selecting

enter image description here

(3) after selection

enter image description here

Hope this is helpful.

Ah k I think I understand what you're doing. You're basically moving all the calculation inside the controller so it doesn't impact the select2 value right? Makes sense. — Batman, Feb 07 '14 at 16:40
I tried it but for some bloody reason it still won't show up with select2 : http://jsfiddle.net/Ay7jA/ Did I do it wrong? — Batman, Feb 07 '14 at 17:23
The jQuery only works the first time, when I change users it doesn't work. — Batman, Feb 07 '14 at 17:30
Can you check the jsfiddle link? It seems like the example code is incomplete (no angular lib include and select2 drop down can't work) — Chickenrice, Feb 07 '14 at 17:39
You can try my demo code: https://drive.google.com/file/d/0BxZuSLUywiToRDVnUDlOYXlxVUU/edit?usp=sharing — Chickenrice, Feb 07 '14 at 17:47

score 0 · Answer 2 · answered Feb 07 '14 at 14:52

Try rewriting the html to this:

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

Notice that I removed ng-value from the select and the value attribute from the options (I also removed the {{..}} surrounding the $index)

selectedUser should always be an integer that represents an index in the users array

I've made the changes but it didn't work. I'm making a plunker, I doubt the plunker will work though but it will have enough code. — Batman, Feb 07 '14 at 15:01

Can't display selected value using select2

2 Answers2