AngularJs: Wie funktioniert ui-select richtig?

Question

DIE LAGE:

ich eine Winkel App machte, wo ich ui-select verwenden: in der Info-Seite, in der Auswahl hat möglich sein, eine oder mehr Tag zu wählen. Es funktioniert fast, abgesehen von der Tatsache, dass ich Probleme habe, die vorhandenen Tags zu bekommen und anzuzeigen.

DER CODE:

Ausblick:

<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> 

Controller:

$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; 

    }); 

}; 

VERSUCH 1:

Es passiert ein sehr seltsames Verhalten. Ich sehe die Tags nicht auf der Info-Seite des Benutzers, und nicht einmal in der ui-Auswahl. Außer wenn 5/6 mal aktualisiert, dann wird es plötzlich magisch funktionieren und die Tags auf der Benutzer-Info-Seite und in der ui-select anzeigen. In beiden Fällen arbeiten und nicht, erhalte ich mehrere Fehlermeldung von der gleichen Art:

nicht Eigenschaft ‚Länge‘ undefinierten lesen kann.

VERSUCH 2:

Um dieses Problem zu lösen, ich diesen Code in der Steuerung hinzugefügt haben:

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

und ich bekomme nicht mehr jede Fehlermeldung. Die App ist stabil und ich kann die richtigen Tags auf der Benutzerinfo-Seite sehen. Das einzige Problem ist, dass die Tags im ui-select nicht mehr geladen sind.

Wenn ich ein neues Tag auswähle, dann funktioniert es gut, aber ich verliere die bereits vorhandenen Tags.

Frage (n):

Wie kann ich ui-select richtig arbeiten zu machen? (derzeit v0.8.3) Es gibt ein Konfliktproblem?

Wie kann ich wirklich vorhandene Daten vom Server aufrufen?

Vielen Dank!

Answer 1

Sie waren nicht besonders beschreibend mit den Fehlern, die Sie sehen, also weiß ich nicht, ob das folgende hilft ..

ich ein Problem ursprünglich hatte, als sie als Beispiel des ui-Select-Demo-Code verwenden, da sie die propsFilter Filter verwenden, das ist ein benutzerdefinierter Filter sie für die Demo geschrieben haben:

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

I Ich gehe davon aus, dass Sie diesen Filter nicht in Ihren Code aufnehmen, was ein Grund für das Auftreten eines Problems sein könnte. Sie können es lösen, indem Winkel normalen Filter:

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

Alternativ, wenn Sie mehrere Eigenschaften filtern Sie die propsFilter Filter schreiben kann, nach dem gefiltert oder besser gesagt als AND. Wenn Sie "filter" verwenden, um mehrere Eigenschaften zu filtern, wird versucht, den Suchwert für alle Eigenschaften abzugleichen.

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; 
      }; 
    }); 

Sie können die hier drin mit dem Filter sehen begehen: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

Obwohl, wenn Sie einige spezielle Filteranforderungen haben würde ich Ihnen empfehlen, einen eigenen Filter zu schreiben, um optimale Leistung zu gewährleisten.

Answer 2

Ich weiß nicht, wie die Situation vor Select2 # 4.0 war, aber es ist wirklich nicht so schwer, es zu benutzen, ohne angular-ui-select (und es ist eine geringere Abhängigkeit)

Gerade umfasst select2 in Ihren Bower Abhängigkeiten und verwenden Sie es in Ihrem link Funktion innerhalb der Richtlinie:

.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'}]... 
      }); 
     }, 
    }; 
}) 

und Ihre HTML:

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

Sie kann auch die data von der Steuerung über einen Service laden, wenn Sie wollen, dann verwenden Sie einfach die scope, um es einzustellen!

Ich sage dies, wie ich versuchte mit angular-ui-select, weil ich dachte "hey, es ist Angular, Sie müssen ein Plugin dafür verwenden!", Aber das ist nicht immer der Fall :). Plus fand ich die Dokumente nicht so hilfreich (rufen Sie mich faul, aber hey)