Question

我正在使用angular-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，但它与Select2不兼容，所以我不得不使用ngRepeat。我的ngRepeat需要将所选用户对象发送到更改时的函数。为了实现这一点，我必须使用ng-value或value将选定的用户$ index绑定到选择元素ng-modal selectedUser，然后我可以根据索引在用户中查找对象。 BUUUT，现在我已经给了我的选项$ index，返回给select2的值没有意义，我猜它只是给了我我的占位符。

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

我尝试将select元素赋予它自己的ng值，以便做出ngChange正在做的事情，并查找所选用户名....但是没有成功。

Answer 1

实际上，当“实体下拉”更改时，您可以利用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

希望这有用。

Answer 2

尝试将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数组

中的索引

无法使用select2显示所选值

2 个答案: