使用select2無法顯示選定的值

我正在使用angular-ui的select2指令。在功能方面它工作正常（在一些頭髮拉動後），但我只是意識到，我所做的工作是防止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值或值來綁定選定的用戶$索引到選擇元素ng模式selectedUser從那裏我可以根據索引在用戶中查找對象。 BUUUT，現在我已經給出了我的選項$ index，返回到select2的值沒有意義，我猜，它只是給我我的佔位符。

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

我試圖給select元素它自己的NG-值來樣做什麼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]; 
    }; 
});

截圖

（1）之前，選擇

enter image description here

（2）

enter image description here

（3）選擇

enter image description here

希望後選擇這是有益的。

來源

2014-02-07 10:10:32 Chickenrice

Ah k我想我明白你在做什麼。你基本上在控制器內部移動所有的計算，所以它不會影響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

我已經做了更改，但沒有奏效。我在做一名笨蛋，我懷疑這個笨蛋會工作，但它會有足夠的代碼。 – Batman

使用select2無法顯示選定的值

回答

相關問題