Data gaya Bootstrap pengikatan dua hala bagi kotak lungsur pilihan tunggal dan berbilang pilihan yang dilaksanakan oleh arahan Sudut tersuai dan jQuery_AngularJS

Mari kita bercakap sedikit tentangnya dahulu Orang yang biasa dengan Angular akan menyukai pemalam ini.

00. Meletakkan kereta sebelum kuda

Saya harus mengakui bahawa saya seorang yang suka mendahulukan kereta sebelum kuda Semasa saya seorang pelajar, saya suka membuat kerja rumah yang lewat dahulu, meninggalkan kerja rumah yang sepatutnya, dan kemudian perlahan-lahan menyelesaikan kerja rumah yang tidak penting. . . Sekarang saya sedang mengusahakan projek ini, kerana saya tidak menemui pemalam Web lungsur turun berbilang pilihan yang sesuai dan saya tidak mahu menggunakan hodoh yang datang dengan HTML, jadi saya menghabiskan masa seharian untuk membuat satu. Mungkin masa yang diambil dalam pembangunan fungsi utama dengan cara ini akan menjadikan pembangunan lebih mendesak. Saya berasa seperti seorang pengaturcara yang mempunyai kecenderungan masokistik dan gangguan obsesif-kompulsif dalam css dan lekukan kod.

01. Berlebihan

Pengawal berkuasa Angular nampaknya dapat memenuhi kebanyakan keperluan UI, tetapi aplikasi NodeJS sering menggunakan enjin templat seperti ejs dan jed untuk menjana halaman html secara dinamik Kemudian masalah timbul Apabila saya ingin melepasi latar belakang Saya lakukan jika parameter res.render() dalam ekspres dipaparkan secara langsung pada antara muka dan terikat kepada model ng yang sepadan?

Penyelesaian 1: Jangan lakukan semuanya sekaligus, Pengawal Angular hanya boleh menghantar permintaan pos dan kemudian mendapatkan datanya

Penyelesaian 2, mula-mula gunakan templat untuk menyimpannya buat sementara waktu pada html, dan kemudian biarkan Pengawal memulakan nilai $scope berdasarkan data pada halaman

Penyelesaian 3. Saya mempunyai sedikit pengetahuan tentang Angular dan EJS. Bolehkah sesiapa mengajar saya cara yang baik?

Contohnya, sekarang saya ingin membuat pilihan kotak lungsur nxx Pilihan ada di latar belakang mereka secara berasingan, saya juga tidak mahu meletakkannya pada halaman Pengawal menulis pemprosesan logik secara berasingan, dan komuniti Angular mempunyai pemalam pilihan-ui Nampaknya data itu diambil daripada $scope, bukan terus daripada < ;pilihan /> saya sangat popular pada masa itu, bukan hanya satu kotak Drop down, lakukan sendiri.

10. Pengaturcara yang optimis

Ideanya sangat jelas, tentukan arahan Sudut -> Saya menganggarkan masa itu adalah setengah hari, tetapi saya hanya boleh meneka berapa lama masa yang diambil sebenarnya saya mempunyai css obsesif-kompulsif, pemahaman yang lemah tentang Angular (begitu banyak operasi HTML masih menggunakan jQuery), dan pertimbangan peristiwa yang tidak mencukupi. akhirnya mengambil masa lebih daripada dua kali. Selesai,

Tiada lagi omong kosong, ia mudah dan praktikal Anda boleh mengikat model ng $scope.xxx dengan cepat, atau anda boleh terus melaraskan jQuery's $("label's id").val() untuk mendapatkan nilai,
Portal Git duang:
https://git.oschina.net/code2life/easy-select.git
Portal demo duang~duang: http://ydxxwb.sinaapp.com/easy-select-demo/
(Kod ini bukan yang terbaru, terdapat dua pembetulan pepijat yang belum digunakan lagi)

11. Penggredan

1. Cara menggunakan: Perkenalkan fail perpustakaan Bootstrap, Angular1.x, perkenalkan fail style.css (anda boleh mengubah suai css untuk menyesuaikan gaya yang anda mahu), easy-select.js, tentukan Pengawal Angular dan bergantung pada modul easySelect Seperti ini↓

angular.module('dataDisplay', ['easySelect']).controller('selectController', ['$skop', '$http',fungsi ($skop, $http) { // kod anda }]);

Kemudian hanya rujuk spesifikasi contoh tunjuk cara untuk menentukan kotak pilihan Bukankah ia sangat biasa dengan teg pilih HTML asli?

2. Penjelasan kod sumber: Operasi dan peristiwa DOM dilaksanakan dengan jQuery, dan setiap langkah mempunyai ulasan mudah. dalam nilai acara[ ng-model],

Dan panggil gelung $digest() untuk membenarkan Angular mengemas kini DOM mengikut model ng $digest ialah salah satu teras pengikatan dua hala Angular Prinsipnya adalah untuk menyegerakkan nilai skop yang diubah ke semua tempat yang perlu dikemas kini. Pelaksanaannya belum lagi besar, saya akan mengkaji perkara ini bermula dengan $, $$ dalam Angular apabila saya mempunyai masa.

3. Adaptif dan css, Bootstrap adalah adaptif, css boleh disesuaikan dengan gaya yang berbeza, style.css mempunyai ulasan yang berkaitan

mudah-pilih.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%;position: relative;left:-1px'>" +
    "<p id='display-"+attrs.id + "' style='padding:6px 12px "+ ((attrs.multiple != undefined)&#63;"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 &#63; "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 &#63; "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. Jika anda melihat ini, ini bermakna anda berminat dengan perkara kecil ini Mari kita perbaikinya bersama-sama di git Kedua-dua fungsi menyesuaikan templat pilihan dan kumpulan pilihan belum dilaksanakan. Anak muda, sertai tentera sumber terbuka.

Di atas ialah kotak lungsur pilihan tunggal dan berbilang pilihan yang dikongsi oleh editor dengan anda dengan arahan Sudut tersuai dan pengikatan dua hala data gaya Bootstrap yang dilaksanakan oleh jQuery.