selectinput.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. app.directive('selectInput', function($compile) {
  2. return {
  3. restrict: 'AE', //attribute or element
  4. // scope: {
  5. // requesdata: '=',
  6. // onChangeadd: '&'
  7. // //bindAttr: '='
  8. // },
  9. template: '<input type = "test" class="form-control allrid" ng-change="changeKeyValue(searchField)" ng-model="searchField"' +
  10. 'ng-click = "checkclick($event)" value="{{searchField}}"/></input>' +
  11. '<div ng-show="hidden&&myData.length>0" class="col-md-12">' +
  12. ' <select class="drowpdawn-select" ng-change="change(x)" ng-model="x" multiple>' +
  13. ' <option ng-repeat="item in myData" class="drowpdawn-option" value={{item}}><div ng-if="!showkeys">{{item.account}}&nbsp{{item.name}}&nbsp{{item.deptName}}&nbsp{{item.placeDTO.place}}</div><div ng-if="showkeys">{{item[showkeys]}}</div><div ng-repeat="key in showkeys">{{item[key]}}</div></option>' +
  14. ' </select>' +
  15. '</div>',
  16. // replace: true,
  17. link: function($scope, elem, attr, ctrl) {
  18. // $scope.requesdata = ["key4", "xyz", "key3", "xxxx", "key2", "value2", "key1", "value1"];
  19. // console.log($scope.myData);
  20. $scope.tempdatas = $scope.requesdata; //下拉框选项副本
  21. $scope.hidden = false; //选择框是否隐藏
  22. $scope.searchField = ''; //文本框数据
  23. $scope.showkeys = "";
  24. if (attr.showkeys) {
  25. $scope.showkeys = attr.showkeys;
  26. }
  27. // $scope.$watch("attr.model", function(newValue, oldValue) {
  28. // $scope.searchField = attr.model;
  29. // })
  30. if (attr.model) {
  31. // $scope.$watch("attr.model", function(newValue, oldValue) {
  32. // $scope.searchField = attr.model;
  33. // })
  34. // $timeout(function() {
  35. $scope.searchField = attr.model;
  36. // }, 1000);
  37. }
  38. //将下拉选的数据值赋值给文本框
  39. $scope.change = function(x) {
  40. // $scope.searchField = JSON.parse(x[0]).account;
  41. // $scope.requester = JSON.parse(x[0]);
  42. $scope.getMydata(x);
  43. if ($scope.searchField == "" && $scope.getMydata(x)) {
  44. $scope.searchField = $scope.getMydata(x);
  45. }
  46. $scope.hidden = false;
  47. }
  48. //获取的数据值与下拉选逐个比较,如果包含则放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换
  49. $scope.changeKeyValue = function(v) {
  50. $scope.getMydataone(v);
  51. $scope.refreshUseradd(v);
  52. var newDate = []; //临时下拉选副本
  53. //如果包含就添加
  54. angular.forEach($scope.requesdata, function(data, index, array) {
  55. if (data.indexOf(v) >= 0) {
  56. newDate.unshift(data);
  57. }
  58. });
  59. //用下拉选副本替换原来的数据
  60. $scope.requesdata = newDate;
  61. //下拉选展示
  62. $scope.hidden = true;
  63. //如果不包含或者输入的是空字符串则用初始变量副本做替换
  64. if ($scope.requesdata.length == 0 || '' == v) {
  65. $scope.requesdata = $scope.tempdatas;
  66. }
  67. console.log($scope.requesdata);
  68. }
  69. },
  70. controller: [
  71. '$scope', '$document',
  72. function($scope, $document) {
  73. // $scope.changeKeyValue = function(v) {
  74. // $scope.onChangeadd(v);
  75. // var newDate = []; //临时下拉选副本
  76. // //如果包含就添加
  77. // angular.forEach($scope.requesdata, function(data, index, array) {
  78. // if (data.indexOf(v) >= 0) {
  79. // newDate.unshift(data);
  80. // }
  81. // });
  82. // //用下拉选副本替换原来的数据
  83. // $scope.requesdata = newDate;
  84. // //下拉选展示
  85. // $scope.hidden = false;
  86. // //如果不包含或者输入的是空字符串则用初始变量副本做替换
  87. // if ($scope.requesdata.length == 0 || '' == v) {
  88. // $scope.requesdata = $scope.tempdatas;
  89. // }
  90. // console.log($scope.requesdata);
  91. // }
  92. $scope.checkclick = function($event) {
  93. if ($scope.hidden) {
  94. $scope.hidden = true;
  95. } else {
  96. $scope.hidden = true;
  97. }
  98. $event.stopPropagation();
  99. }
  100. $document.bind("click", function(event) {
  101. $scope.hidden = false;
  102. $scope.$apply();
  103. });
  104. }
  105. ],
  106. }
  107. // };
  108. });