使用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无法显示选定的值

回答

相关问题