Custom Angular command and jquery implementation of the bootstrap style data two-way binding radio and multiple selection dropdown box _angularjs

First of all gossip, familiar with the angular ape will like this plugin.

00. Putting the cart before the horse

I have to admit that I am a person who likes to put the cart before the horse, students like the first late-handed homework to do first, keep the homework immediately to do not do, and then leisurely finish the unimportant work, horizontal slot, XX homework immediately to hand, hurriedly fill up. Now do this project, because did not find the appropriate multiple-select Drop-down Web Plug-ins, and do not want to use HTML from the ugly <select multiple></select> and spent the whole day doing one. Perhaps this is the main function of the development time, development will be more sense of urgency bar. I feel like I'm a trembling self, and I'm a program ape with CSS and code-shrink obsessive-compulsive disorder.

01. Gild The Lily

Angular powerful controllers seem to have been able to meet most of the UI requirements, but Nodejs apps often use a template engine like Ejs,jade to dynamically generate HTML pages, so the problem is, when I want to pass the background to express Res.render () The parameters are directly displayed to the interface and bound to the corresponding Ng-model how to do?

Workaround 1, don't do anything at once, angular controller send a POST request and then get the data.

Workaround 2, use the template to hold the HTML first, and let controller initialize the $scope value based on the data on the page.

Solution 3, my humble to angular and ejs talents, who has a good way to teach me Bai

For example, now to do a selection drop-down box <select>n a <option>xx</option></select>, the option in the background, I do not want to send a separate post to take, do not want to put on the page, Controller alone to write logical processing, and angular community has a ui-select plug-in, looks like the data from the $scope, not directly to take <option/> Label data, then I fire, not just a drop-down box, do Bai.

10. The Optimistic procedure Ape

The idea is clear, define a angular directive-> take the option value out-> various events Gagaga-> scope data binding-> end Sprinkle
I estimate the time is half a day, however, how long actually spent can only hehe, CSS obsessive-compulsive disorder, angular understand not deep (so many HTML operations or in the use of jquery), the incident considerations not all lead to spend more than twice times the end of time to finish,
No nonsense, simple and practical, can be immediately bound Ng-model $scope. XXX, you can also directly tune jquery's $ ("tag id"). val () can also get the value,
Git portal Duang:https://git.oschina.net/code2life/easy-select.git
Demo Portal duang~duang:http://ydxxwb.sinaapp.com/easy-select-demo/(code is not up to date, with two fix bugs not yet deployed)

11. Grading

1. How to use: Introduce library file bootstrap, angular1.x, introduce the Style.css file (you can modify the CSS to customize the style you want), easy-select.js, define angular controller, rely on the Easyselect module, such as ↓
Angular.module (' Datadisplay ', [' Easyselect ']). Controller (' Selectcontroller ', [' $scope ', ' $http ', function ($scope, $ HTTP) {//Your Code}]);

Then refer to the Spec definition selection box for the demo example, and it's not very intimate with the HTML native select label.

2. SOURCE interpretation: DOM operations and events are implemented in jquery, each step has a brief annotation, the key to achieve two-way binding is to get the Ng-model defined on the label, and then set the value of Scope[ng-model in the event,
and call the $digest () loop to get angular to update the DOM according to Ng-model, $digest is one of the cores of the angular implementation of two-way binding, which is to sync the changing scope values to all the places that need to be updated, and the implementation is not quite clear yet, have free time to study the $,$$ of these angular.

3. Adaptive and Css,bootstrap is adaptive, CSS can customize different styles, Style.css have related comments

Easy-select.js

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%;p osition:relative;left:-1px ' >" + "& Lt;p id= ' display-' +attrs.id + ' style= ' padding:6px 12px ' + ((attrs.multiple!=)? "  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:1 00%;d isplay:inline-block ' > ' + $ (options[opt]). HTML () + "</div><span value= '" + $ (options[opt)). Val () + "' C
    Lass= ' 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-"' >"
     + $ (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= ' ens Ure-li ' ><button class= ' btn btn-default ' "+" for= ' ensure-btn "style= '" padding:2px "> OK </button></l
   I> ";
   //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 ("sty
    Le "," ");
    });
     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 ("O
       Pacity "," 0.01 ");
     }
      }); else if ($ (this). attr ("for")!= ' Ensure-li ') {//toggle ul $ ("#" + attrs.id + "-container"). attr ("Style", STA Tus?
      "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). Re
        Move ();
      }
       });
       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 (the 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"). att R ("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 ());
    });
   });  }
  }
 }
});

100. If you see this, show interest in this little thing, git on the perfect, Custom option templates, options grouping These two features are not yet implemented. Young man, join the open source Army.

The above is a small set to share the custom angular instructions and jquery implementation of the bootstrap style data two-way binding radio and multiple selection dropdown box, I hope you like.