ngTagsInput mit gefilterter Auto-Vervollständigung

Ich versuche, ein Tags-Eingabefeld mit Auto-Vervollständigung zu erstellen. Hier ist der Winkel Code:ngTagsInput mit gefilterter Auto-Vervollständigung

var app = angular.module('plunker', ['ngTagsInput']); 

      app.controller('MainCtrl', function($scope, $http) { 
       $scope.loadTags = function(query) { 
       return $http.get(Routing.generate('my_route_to_json_data')); 
       } 
      });

HTML-Code:

<body ng-app="plunker" ng-controller="MainCtrl"> 
     <tags-input ng-model="tags" add-on-paste="true" display-property="categoryname" placeholder="Add a Tag"> 
      <auto-complete max-results-to-show="4" min-length="0" source="loadTags($query)"></auto-complete> 
     </tags-input> 
    <p>Model: {{tags}}</p> 
    </body>

Die $http.get(Routing.generate('my_route_to_json_data')); kehrt tags.json:

[{"categoryname":"wifi"},{"categoryname":"cable"},{"categoryname":"tv"},{"categoryname":"geyser"},{"categoryname":"fridge"},{"categoryname":"sofa"},{"categoryname":"lift"},{"categoryname":"gas stove"},{"categoryname":"washing machine"}]

Diese perfeclty funktioniert. Wenn ich Eingaben in das Feld eingeben, werden die Vorschläge im Dropdown-Menü angezeigt.

Problem: Jetzt möchte ich die Vorschläge angezeigt werden, basierend auf Benutzereingaben gefiltert werden.

Für das änderte ich mein Eckige Code dazu:

var app = angular.module('plunker', ['ngTagsInput']); 

    app.controller('MainCtrl', function($scope, tags) { 

      $scope.loadTags = function(query) { 
      return tags.load(); 
      }; 
    }); 

    app.service('tags', function($q, $http, $filter) { 
    var tags = $http.get(Routing.generate('my_route_to_json_data')); 

    this.load = function(query) { 
     var deferred = $q.defer(); 
     deferred.resolve($filter('filter')($scope.tags, query)); 
     return deferred.promise; 
    }; 
    });

Funktioniert nicht :(

Jedwedes Hilfe ist willkommen

Hier die Konsole.

Quelle

2016-07-06 utkarsh2k2

Erhalten Sie irgendwelche Fehler? Weil ich sehe, dass Sie nirgends '$ filter' Dienst in' Tags' Dienst injiziert haben. –

@Tarun Danke für das Feedback, ich habe den Schnitt gemacht. Funktioniert immer noch nicht – utkarsh2k2

Was ist $ Scope in dieser Zeile? '' 'Javascript deferred.resolve ($ filter ('filter') ($ scope.tags, Abfrage)); '' ' –

Ich würde den Dienst zu etwas wie ändern:

app.service('tags', function($q, $http, $filter) { 
    this.load = function(query) { 
     return $http.get(Routing.generate('my_route_to_json_data')).then(
      function(result) { 
       return $filter('filter')(result.data, query) 
      } 
     ) 
    }; 
});

Der Dienst gibt nun ein verkettetes Versprechen zurück und die Auflösungsfunktion behandelt den Filter.

Sie können die Ergebnisse zwischenspeichern und eine Zusage (unter Verwendung des $q-Dienstes), die das zuvor vom Server zurückgegebene Array von Tags enthält, zurückgeben.

Ich weiß nicht, ob der Filter selbst funktioniert - Aber jetzt wird es eine Liste von Elementen zu filtern haben und nicht undefined Wert ($scope.tags).

Quelle

2016-07-06 07:11:05

Danke für die Antwort, jetzt funktioniert der Service, aber der Filter funktioniert nicht – utkarsh2k2

Ich muss gehen, aber ich werde einen zweiten Blick auf das Filter Problem haben, wenn ich in ein paar Stunden zurück bin –

Schätze es :) – utkarsh2k2

ngTagsInput mit gefilterter Auto-Vervollständigung

Antwort

Verwandte Themen