【angular下拉框】自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框-bootstrap多选下拉框-bootstrap单选下拉框

var comDirective=angular.module('easySelect', []);
comDirective.directive("easySelect", function () {
 return {
  link: function (scope, element, attrs) {
   var ngModel=$(element).attr("ng-model");
   if(!ngModel || ngModel.length==0) {
    ngModel="defaultSelectModel";
   }
   var status=false; //toggle boolean
   var valueMap="";
   var options=$(element).children();
   $(element).attr("style", "padding:0");
   //hide original options
   $.each(options, function (opt) {
    $(options[opt]).attr("style", "display:none");
   });
   //build ul
   var html="<div id='" + attrs.id + "-root' style='width:100%;position: relative;left:-1px'>" +
    "<p id='display-"+attrs.id + "' style='padding:6px 12px "+ ((attrs.multiple !=undefined)?"4px":"7px")+
    " 12px;margin:0;border:none;width:95%;margin-left:2px;background-color: transparent'>" +
    "<span style='display: inline-block;padding-bottom: 3px'> </span></p>" + //this is a dummy span
    "<ul id='" + attrs.id +
    "-container' class='list-group easy-select-container' style='display:none'>"; //options' container
   if(attrs.multiple !=undefined) {
    $.each(options, function (opt) {
     html +="<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+
     attrs.id+ "'><div style='width:100%;display:inline-block'>" + $(options[opt]).html() +
     "</div><span value='"+ $(options[opt]).val() +"' class='my-li-option glyphicon glyphicon-ok'></span></li>";
    });
   } else {
    $.each(options, function (opt) {
     if($(options[opt]).attr("default") !=undefined) {
      scope[ngModel]=$(options[opt]).val();
      valueMap=$(options[opt]).html();
      html +="<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+ attrs.id+ "'>"
      + $(options[opt]).html() + "</li>";
     } else {
      html +="<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+ attrs.id+ "'>"
      + $(options[opt]).html() + "</li>";
     }
    });
   }
   //if multiple, add button
   if (attrs.multiple !=undefined) {
    html +="<li class='list-group-item ' for='ensure-li'><button class='btn btn-default'" +
    " for='ensure-btn' style='padding: 2px' > 确定 </button></li>";
   }
   //render ui
   html +="</ul></div>";
   $(element).append(html);
   $(".my-li-option").each(function(){
    $(this).fadeOut(0);
   });
   if(attrs.multiple==undefined)
    $($("#display-"+attrs.id).children()[0]).html(valueMap);
   //adjust width
   $("#" + attrs.id + "-root").width($("#" + attrs.id + "-root").width() + 2);
   //mouse leave event
   $(element).mouseleave(function(){
    $(".my-li-container").each(function(){
     $(this).attr("style","");
    });
    if(status) {
     $("#" + attrs.id + "-container").attr("style", "display:none");
     status=!status;
    }
   });
   //multiple select seems complex
   if (attrs.multiple !=undefined) {
    //click event
    $(element).click(function (e) {
     //if click on tags, remove it
     if($(e.target).attr("for")=="option-tag") {
      // change val and digest change item in angular
      scope[ngModel]=$(element).val().replace($(e.target).attr("value"),"").replace(/;+/,";").replace(/^;/,"");
      $(element).val(scope[ngModel]);
      scope.$digest();
      $(e.target).remove();
      $(".my-li-option").each(function(){
       if($(this).attr("value")==$(e.target).attr("value")) {
        $(this).css("opacity","0.01");
       }
      });
     } else if($(this).attr("for") !='ensure-li') {
      //toggle ul
      $("#" + attrs.id + "-container").attr("style", status ? "display:none" : "");
      status=!status;
     }
    });
    $(".option-"+attrs.id).each(function(){
     $(this).on('click',function(){
      var selectValue=$(element).val();
      var currentValue=$(this).attr("value");
      var selected=false;
      //if option is selected ,remove it
      var temp=selectValue.split(";");
      $.each(temp,function(obj){
       if(temp[obj].indexOf(currentValue) !=-1) {
        selected=true;
       }
      })
      if(selected) {
       $($(this).children()[1]).fadeTo(300,0.01);
       scope[ngModel]=$(element).val().replace(currentValue,"").replace(/;{2}/,";").replace(/^;/,"");
       $(element).val(scope[ngModel]);
       scope.$digest();
       $("#display-"+attrs.id + " span").each(function(){
        if($(this).attr("value")==currentValue) {
         $(this).remove();
        }
       });
      } else {
       //add option to val() and ui
       $($(this).children()[1]).fadeTo(300,1);
       scope[ngModel]=($(element).val()+";"+currentValue).replace(/;{2}/,";").replace(/^;/,"");
       $(element).val(scope[ngModel]);
       scope.$digest();
       $("#display-"+attrs.id).append(
        "<span for='option-tag' value='"+ $(this).attr("value") +"' class='p-option-tag'>"
        +$(this).children()[0].innerHTML+ "</span>");
      }
      status=!status; // prevent bubble
     });
     //control background
     $(this).mouseenter(function(){
      $(".my-li-container").each(function(){
       $(this).attr("style","");
      });
      $(this).attr("style","background-color:#eee");
     });
    });
   } else {
    $(".option-"+attrs.id).each(function(){
     $(this).mouseenter(function(){
      $(".my-li-container").each(function(){
       $(this).attr("style","");
      });
      $(this).attr("style","background-color:#eee");
     });
    });
    //single select ,just add value and remove ul
    $(element).click(function () {
     $("#" + attrs.id + "-container").attr("style", status ? "display:none" : "");
     status=!status;
    });
    $(".option-"+attrs.id).each(function(){
     $(this).on('click',function(){
      scope[ngModel]=$(this).attr("value");
      $(element).val(scope[ngModel]);
      scope.$digest();
      console.log(ngModel);
      console.log(element.val());
      $($("#display-"+attrs.id).children()[0]).html($(this).html());
     });
    });
   }
  }
 }
}); 

关于自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框的用户互动如下：

　　相关问题：jquery timepicker 在bootstrap中的模态窗口中不能...

　　答：我现在用的配置：$(".form_time").datetimepicker({ language: 'zh-CN', weekStart: 1, autoclose: true, startView: 2, minView: 2 }); 前端： 这个是可以显示的，你试试 >>详细

　　相关问题：将BootstrapJS和AngularJS结合使用以及为什么不用j...

　　答：AngularJS依赖注入，JQuery依赖选择器； AngularJS有助于前后台数据的耦合，而JQuery无法达到该效果； 目前华为公司采用的就是：内部前端框架(名称不能漏，不好意思，自己公司开发的)+AngularJS+Bootstrap。无论是从性能上，还是从前后台数据耦... >>详细

　　相关问题：angular如何点击链接传递参数到bootstrap model中...

　　答：上午无聊，写了个例子，传值给modal再返回～ testvar myApp = angular.module("myApp", ["ui.bootstrap"]);myApp.controller("testCtrl", function($scope, $modal){ $scope.sign = []; $scope.data = [{id:1,value:"hello"},{id:2,value:"bye"}... >>详细