AngularJs: UI-select'i düzgün bir şekilde nasıl çalıştırıyorsunuz?

Question

DURUM: Ben ui-select kullanmak zorunda bir açısal uygulamayı yapıyorum

: Kullanıcı bilgi sayfasında yer seçin içinde bir veya birçok etiket seçmek mümkün olmalıdır. Önceden varolan etiketleri almak ve görüntülemek için sorunlarım olduğu gerçeğinin dışında neredeyse çalışıyor.

KODU:

Görünüm:

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled"> 

    <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match> 

    <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

    {{tag.name}} 

    </ui-select-choices> 

</ui-select> 

<p>Selected: {{info_data.tags}}</p> 

Denetleyici:

$http({ 

    url: base_url + 'main/db_get_all_tags', 
    method: "POST", 

}).success(function (data) { 

    $scope.all_tags = data; 

}); 

$scope.show_info = function() { 

    var result_info = DbService.get_info($stateParams.db_data_id); 

    result_info.then(function(data) 
    { 
     $scope.info_data = data; 

    }); 

}; 

ATTEMPT 1:

Çok garip bir davranış olur. Etiketler ui seçiminde bile kullanıcının bilgi sayfasında görmüyorum. 5/6 kez yenilendiyse hariç, aniden sihirli bir şekilde çalışacak, kullanıcı bilgileri sayfasında ve ui seçiminde etiketleri gösterecektir.

tanımsız malı 'uzunluğunu' okunamadı: Her iki durumda da , çalışma ve değil, ben aynı tür birçok hata mesajı alabilirsiniz.

2 GİRİŞİMİ: Bu sorunu çözmek için

, ben denetleyicisi bu kodu ekledik:

$scope.info_data = { tags: [] }; 
$scope. all_tags = []; 

Ve ben artık herhangi bir hata mesajı alamadım. Uygulama kararlı ve kullanıcı bilgileri sayfasında uygun etiketleri görebiliyorum. Tek sorun, ui seçimlerinde artık etiketlerin yüklü olmamasıdır.

Yeni bir etiket seçtiyse, iyi çalışıyor, ancak önceden var olan etiketleri kaybediyorum.

SORU (ler) i düzgün çalıştığından ui-select yapabilirsiniz nasıl

? (şu anda v0.8.3) Bir çakışma sorunu var mı?

Sunucudan önceden varolan verileri nasıl doğru şekilde çağırabilirim?

Çok teşekkür ederim!

Answer 1

Gördüğünüz hatalardan özellikle açıklayıcı olmadınız, bu yüzden aşağıdakilerden hangisinin yardımcı olacağını bilmiyorum ..

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

I: onlar demo için yazdım özel filtre olup propsFilter filtre kullanarak çünkü örnek olarak ui-select demo kodunu kullanırken aslında bir sorun vardı

Bu filtreyi kodunuza dahil etmediğinizi varsayıyorum, bir sorunla karşılaşmanızın bir nedeni olabilir. Sen açısal normal filtre kullanarak çözebilir:

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}"> 

Alternatif olarak, üzerinde YA ziyade VE filtrelemek için propsFilter filtreyi yazabilirsiniz filtrelemek için birden özelliklere varsa. Birden fazla mülkü filtrelemek için 'filtre'yi kullanırsanız, tüm özelliklerde arama değerini eşleştirmeye çalışır.

app.filter('propsFilter', function() { 
    return function(items, props) { 
      var out = []; 
       if (angular.isArray(items)) { 
        items.forEach(function(item) { 
         var itemMatches = false; 

         var keys = Object.keys(props); 
         for (var i = 0; i < keys.length; i++) { 
           var prop = keys[i]; 
           var text = props[prop].toLowerCase(); 
           if (item[prop].toString().toLowerCase().indexOf(text) !== -1) { 
            itemMatches = true; 
            break; 
            } 
          } 

          if (itemMatches) { 
           out.push(item); 
          } 
         }); 
       } else { 
        // Let the output be the input untouched 
         out = items; 
       } 

       return out; 
      }; 
    }); 

burada o filtreli taahhüt görebilirsiniz: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

Eğer bazı özel filtreleme gereksinimleri varsa ben iyi performansı sağlamak için kendi filtreyi yazmanızı öneriyoruz rağmen .

Answer 2

Durumun önce Select2 # 4.0 nasıldı bilmiyorum, ama çok zor angular-ui-select olmadan kullanmak değil gerçekten var (ve bir daha az bağımlılık var)

Sadece Bower bağımlılıkları select2 dahildir ve direktif içinde link fonksiyonda kullanın:

.directive('someDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      element.find('.your-select2').select2({ 
       theme: 'classic', 
       placeholder: 'Select a placeholder...', 
       allowClear: true, 
       data: [{ id: 'New', text: 'New'}]... 
      }); 
     }, 
    }; 
}) 

ve HTML:

<select class="your-select2" ng-model="a.model.field"></select> 

You Ayrıca data'u kontrolörden bir servisten yükleyebilirsiniz, daha sonra ayarlamak için sadece scope'u kullanın!

angular-ui-select'u kullanmayı denediğim gibi söylüyorum çünkü "hey Angular, bunun için bir eklenti kullanmalısınız!" Diye düşündüm, ama bu her zaman böyle değil :). Ayrıca çok yararlı olmayan dokümanları buldum (beni tembel ama hey)