This is a fork from the ngTagsInput Check out the ngTagsInput website for more information. Many thanks to mBedford for the work he put into it. This fork has different objectives from ngTagsInput, which are outlined below.
combobox is designed to be a flexible combobox/autocomplete input, with no dependencies. It supports autocomplete, and can read options from a remote source, a static model on the scope, or a series of options elements (like a html select or ng-options). It optionally supports allowing users to enter a value that wasn't in the initial options model, or to select multiple options. When used in conjunction with Bootstrap 3 forms css, it can also act as a "select" input, allowing the user to click an arrow to view the options.
- AngularJS 1.2.1+ (v1.2.0 is not supported due to an API change in Angular)
- A sort-of modern browser. IE8 it currently supported, but may not be in the future.
- Add the
ngTagsInputmodule as a dependency in your AngularJS app; - Add the custom directive
<combobox>to the HTML file where you want to use an input tag control and bind it to a property of your model. That property, if it exists, must be an array of objects and each object must have a property namedtextcontaining the tag text; - Set up the options that make sense to your application;
- Enable autocomplete, if you want to use it, by adding the directive
<auto-complete>inside the<combobox>tag, and bind it to a function of your model. That function must return a promise that eventually resolves to an array of objects (same rule from step 2 applies here); - Customize the CSS classes, if you want to.
- You're done!
Note: There's a more detailed getting started guide on the ngTagsInput website.
<html>
<head>
<script src="angular.min.js"></script>
<script src="ng-combobox.min.js"></script>
<link rel="stylesheet" type="text/css" href="ng-combobox.min.css">
<script>
angular.module('myApp', ['ngTagsInput'])
.controller('MyCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
];
$scope.loadTags = function(query) {
return $http.get('/tags?query=' + query);
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<combobox ng-model="tags">
<auto-complete source="loadTags($query)"></auto-complete>
</combobox>
</body>
</html>Check out the documentation page for a detailed view of all available options.
You can see the directive in action in the demo page.
See the CONTRIBUTING file.
See the LICENSE file.
See the CHANGELOG page.
The following are some alternatives to ngTagsInput you may want to check out:
- angular-tags: Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
- angular-tagger: Pure Angular autocomplete with tags, no jQuery
- jsTag: Open source project for editing tags (aka tokenizer) based on AngularJS
- bootstrap-tagsinput: jQuery plugin providing a Twitter Bootstrap user interface for managing tags (provides Angular support)