Custom Angular commands and jQuery-implemented Bootstrap-style data two-way binding single-choice and multiple-choice drop-down boxes _ AngularJS

This article mainly introduces the information about two-way binding between custom Angular commands and Bootstrap Style Data implemented by jQuery, such as single-choice and multi-choice drop-down boxes. For more information, see the following, those familiar with Angular will like this plug-in.

00. put the cart before the horse

I have to admit that I am a person who likes to put the cart before the horse. In the student age, I like to do my homework first, keep my homework that will be handed in right away, and then slowly finish unimportant homework, XX job is about to be handed in. Please make up for it. Now I am working on this project, because I have not found a proper multi-choice drop-down Web plug-in, and I don't want to use the ugly plug-in that comes with html.It took me a whole day to create one. Maybe it takes more time to develop the main functions. I feel that I am a kind of mobile phone shake and abuse, and it is accompanied by css and code indentation.

01. superfluous

Angular's powerful controller seems to be able to meet most UI requirements. However, NodeJS applications often use templates such as ejs and jade to dynamically generate html pages, when I want to pass the background to res in express. what if the render () parameter is directly displayed on the interface and bound to the corresponding ng-model?

Solution 1: do not try again. Angular Controller sends a post request and obtains data again.

Solution 2: first save the template to html, and then let the Controller initialize the value of $ scope based on the data on the page.

Solution 3: I am not familiar with Angular and EJS. Who can teach me?

For example, you need to create a selection drop-down box.NXxThe options are in the background. I don't want to post them separately or put them on the page. The Controller writes the logic for processing separately, and the Angular community has a ui-select plug-in, it seems that the data is obtained from $ scope, but not directly.Tag data, I was on fire at the time. I didn't need a drop-down box to do it myself.

10. Optimistic programmers

The idea is clear, define an Angular ctive ve-> take out the option value-> add various events-> scope data binding-> end spending
I estimated that the time was half a day, but it took only a long time to get started. css is obsessive-compulsive and Angular does not have a deep understanding (so many html operations are still using jQuery ), the incomplete consideration of the incident resulted in the final completion of more than two times of time,
It is simple and practical, and can be instantly bound to ng-model $ scope. xxx, you can also directly call 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/ (the code is not up-to-date and there are two fix bugs not deployed yet)

11. Put the code

1. Usage: import the library file bootstrap,angular1.x, import style.css file (you can modify css to customize the style you want), easy-select.js, define Angular Controller, rely on easySelect module, like so else
Angular. module ('datadisplay', ['easyselect']). controller ('selectcontroller', ['$ scope', '$ http', function ($ scope, $ http) {// your code}]);

Then refer to the standard definition selection box in the demo example. Is there a strong sense of intimacy with the html native select tag?

2. source code explanation: dom operations and events are implemented using jQuery. Each step has a brief comment. The key to implementing bidirectional binding is to obtain the ng-model defined on the tag, then, set the scope [ng-model] value in the event,
In addition, the $ digest () loop is called to allow Angular to update DOM Based on ng-model. $ digest is one of the core aspects of Angular's Bidirectional binding, the principle is to synchronize the changed scope value to all the places that need to be updated, and the implementation is not clear yet. If you have time to study the content starting with $ and $ in these Angular separately.

3.when coding with cssand bootstrap, csscan be used to define different style.css has related comments.

Easy-select.js

Var comDirective = angular. module ('easyselect', []); comdireve ve. 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 ="
"+"
"+"
"+ // This is a dummy span"
 
 

  
  
"; // Options 'iner iner if (attrs. multiple! = Undefined) {$. each (options, function (opt) {html + ="
  
  
"+ Response (options?opt=}.html () +"
";}) ;}Else {$. each (options, function (opt) {if ($ (options [opt]). attr (" default ")! = Undefined) {scope [ngModel] = $ (options [opt]). val (); valueMap = optional (options?opt=#.html (); html + ="
  
  
"+ Response (options?opt=}.html () +"
";} Else {html + ="
  
  
"+ Response (options?opt=}.html () +"
";}}) ;}// If multiple, add button if (attrs. multiple! = Undefined) {html + ="
  
  
OK
";} // Render ui html + ="
 
 
"; $ (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.tar get ). attr ("for") = "option-tag") {// change val and digest change item in angular scope [ngModel] = partition (element).val().replace(e.tar get ). attr ("value "),""). replace (/; + /,";"). replace (/^;/, ""); $ (element ). val (scope [ngModel]); scope. $ digest (); iterator (e.tar get ). remove (); $ (". my-li-option "). each (function () {I F ($ (this ). attr ("value") = condition (e.tar get ). attr ("value") {condition (this).css ("opacity", "0.01") ;}}) ;}else if ($ (this ). attr ("")! = 'Enable-lil') {// 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 (); scope [ngModel] = ($ (element ). val () + ";" + currentValue ). replace (/; {2 }/,";"). replace (/^;/, ""); $ (element ). val (scope [ngModel]); scope. $ digest (); $ ("# display-" + attrs. id ). append ("" + $ (this ). children () [0]. innerHTML + "");} 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 ());});});}}}});

100. If you see this, it means you are interested in this little item. Complete it together on git. The custom option template and option grouping functions have not been implemented yet. Young man, join the open-source army.

The above is a single-choice and multi-choice drop-down box for two-way binding of custom Angular commands and Bootstrap Style Data implemented by jQuery.