utkarsh2k2 utkarsh2k2 - 5 months ago 78
AngularJS Question

ngTagsInput/auto-complete ( AngularJS )

I am trying to display a tag-input field with auto-complete, so that if the user enter some text in the input field, the available tags appear as suggestions in the dropdown. Everything works fine so far:

<body ng-app="plunker" ng-controller="MainCtrl">
<tags-input ng-model="tags" add-on-paste="true">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>
</body>


AngularJS code:

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


Here is the working result:
enter image description here

Problem is when I try to add
maxResultsToShow="4"
or
minLength="1"
attributes to , they don't work, n I still get the same result.

<body ng-app="plunker" ng-controller="MainCtrl">
<tags-input ng-model="tags" add-on-paste="true">
<auto-complete maxResultsToShow="4" loadOnEmpty=true minLength="1" source="loadTags($query)"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>
</body>


Any ideas?

Answer

<auto-complete max-results-to-show="4" load-on-empty="true" min-length="1" source="loadTags($query)">

In angular, you have to use dash-case in the html tags and camelCase in the JS code, they are automatically converted.