无法使用select2显示选定的值
[英]Can't display selected value using select2
问题描述
I'm using angular-ui's select2 directive. 
我正在使用angular-ui的select2指令。 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. 在功能方面，它工作得很好（拉了一些头发之后），但我刚刚意识到，我所做的工作现在阻止了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>
At first I was using ngOptions, but it isn't compatible with Select2 so I had to use ngRepeat. 起初，我使用的是ngOptions，但它与Select2不兼容，因此我不得不使用ngRepeat。 My ngRepeat needs to send the selected user Object to a function on change. 我的ngRepeat需要将选定的用户Object发送给更改后的函数。 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. 为此，我必须使用ng-value或value将选定的用户$ index绑定到ng-modal selectedUser的选择元素，然后才能根据索引在用户中查找对象。 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. BUUUT，现在，我已为我的选项赋予了$ index，返回到select2的值我想不通，而只是给我占位符。
.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. 我试着给select元素自己的ng值，以执行ngChange所做的事情，并查找所选的用户名....但是是的，没有成功。
2 个解决方案
解决方案1
0 2014-02-07 10:10:32
Actually you could leverage jQuery to fetch the selected option index when the 'entity drop down' has been changed. 实际上，当“实体下拉列表”已更改时，您可以利用jQuery来获取选定的选项索引。 The example below is a simple demo for your question. 以下示例是您的问题的简单演示。
HTML 的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 （1）选择之前
(2) selecting （2）选择
(3) after selection （3）选择后
Hope this is helpful. 希望这会有所帮助。
解决方案2
0 2014-02-07 14:52:30
Try rewriting the html to this: 尝试将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>
Notice that I removed ng-value from the select and the value attribute from the options (I also removed the {{..}} surrounding the $index ) 注意，我从select中删除了ng-value ，从选项中删除了value属性（我也删除了$index周围的{{..}} ）
selectedUser should always be an integer that represents an index in the users array selectedUser应该始终是代表users数组中索引的整数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.