Skip to content

Instantly share code, notes, and snippets.

@hitenpratap

hitenpratap/tagInput.html

Created December 22, 2015 19:56
Show Gist options
  • Save hitenpratap/8148201316ce4bf0a5f0 to your computer and use it in GitHub Desktop.
Save hitenpratap/8148201316ce4bf0a5f0 to your computer and use it in GitHub Desktop.
Download ZIP
Tag input with autocomplete in AngularJS
Raw
tagInput.html
<html ng-app="tagApp">
<head>
<style>
.friendTag {
display: inline-block;
margin-right: 5px;
font-size: 13px;
background-color: dodgerblue;
}
.friendTag .close {
font-size: 14px;
margin-left: 5px;
}
.createEventAddedFriendBlock {
margin-top: 2%;
}
</style>
</head>
<body ng-controller="tagController">
<div class="form-group label-floating">
<label class="control-label" for="newTag">Add Tags</label>
<div class="input-group">
<input class="form-control" id="newTag" name="newTag" type="text" ng-model="modelObj"
ui-autocomplete="myOption">
<span class="input-group-addon">
<button class="btn btn-info" ng-click="addTag()">Add</button>
</span>
</div>
<span class="help-block">Press Add button just right next to Add Friend field to add entered text as Friend to Event.</span>
<div class="createEventAddedFriendBlock">Added Friends:
<span class="badge badge-default friendTag" ng-repeat="tag in tags">{{tag}} <a
class="close" href="javascript:void(0)" ng-click="removeTag($index)">×</a></span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment