AngularJS

Question

'da Önyükleme Çoklu Seçim Düşüşünü nasıl kullanabilirim? AngularJS'de Önyükleme Çok Noktalı Düşüşünü http://davidstutz.github.io/bootstrap-multiselect/ kullanmak istiyorum. Direktife taşınmanın gerekli olduğunu duydum. Ama bence bu oldukça karmaşık & ne yapmam gerektiğini bilmiyorum. Deneyimliyseniz lütfen bana rehberlik edin! Tks.

Answer 1

Çok tekrar kullanılabilen bir kod oluşturmanız gerekmiyorsa, aslında o kadar da karmaşık değildir. aslında sadece normal jQuery veya JS kodunun, sen yönergesi içindedir kez Temelde

angular.module('yourapp', []) 

.directive('multiselectDropdown', [function() { 
    return function(scope, element, attributes) { 

     element = $(element[0]); // Get the element as a jQuery element 

     // Below setup the dropdown: 

     element.multiselect({ 
      option1: 123, 
      option2: "abcd", 
      // etc. 
     }) 

     // Below maybe some additional setup 
    } 
}]); 

: İlk adım temel bir direktif yaratmak ve DOM elementi elde etmektir. HTML kodundaki Sonra

:

<select multiselectDropdown > 
    <option value="1">One</option> 
    <option value="2">One</option> 
    <option value="3">One</option> 
</select> 

Ayrıca DIV ilave özellikleri belirlemek ve direktifin attributes parametresini kullanarak değerler elde edebilirsiniz.

Answer 2

Projemde kullanacağım bir yönerge. Chrome ve Firefox'ta çalışır. Seçenekleri kendi ihtiyacınıza göre değiştirebilirsiniz. Angularjs v1.3.15 ve önyükleme-multiselect v0.9.6 çalışan direktif

angular.module('yourApp') 
.directive('yourDirective', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.multiselect({ 
       buttonClass: 'btn', 
       buttonWidth: 'auto', 
       buttonContainer: '<div class="btn-group" />', 
       maxHeight: false, 
       buttonText: function(options) { 
        if (options.length == 0) { 
         return 'None selected <b class="caret"></b>'; 
        } 
        else if (options.length > 3) { 
         return options.length + ' selected <b class="caret"></b>'; 
        } 
        else { 
         var selected = ''; 
         options.each(function() { 
         selected += $(this).text() + ', '; 
         }); 
         return selected.substr(0, selected.length -2) + ' <b class="caret"></b>'; 
        } 
       } 
      }); 

      // Watch for any changes to the length of our select element 
      scope.$watch(function() { 
       return element[0].length; 
      }, function() { 
       element.multiselect('rebuild'); 
      }); 

      // Watch for any changes from outside the directive and refresh 
      scope.$watch(attrs.ngModel, function() { 
       element.multiselect('refresh'); 
      }); 

     } 

    }; 
}); 

Güncelleme iki parçacıkları: JavaScript, CoffeeScript