0

我正在使用 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-modalselectedUser从那里我可以根据索引在用户中查找对象。BUUUT，现在我已经为我的选项提供了 $index，我猜返回给 select2 的值没有意义，它只是给了我我的占位符。

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

我尝试为选择元素赋予它自己的 ng-value 来做 ngChange 正在做的事情并查找选定的用户名......但是是的，那没有成功。

4

2 回答 2

0

实际上，当“实体下拉菜单”已更改时，您可以利用 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) 选择前

在此处输入图像描述

(2) 选择

在此处输入图像描述

(3)选择后

在此处输入图像描述

希望这会有所帮助。

于 2014-02-07T10:10:32.117 回答
0

尝试将 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-07T14:52:30.393 回答