Multiple Tags in the Select dropdown with Angular JS

In this article, we discuss Multiple Tags in the Select dropdown with Angular JS

Multiple Tags in the Select dropdown with Angular JS

Multiple Tags in the Select dropdown with Angular JS

tags we can use for multiple values in the input tag or select dropdown tag.

Chips are compact elements that represent an input, attribute, or action. Chips should appear dynamically as a group of multiple interactive elements.

Bootstrap tags and chips categorize content with the use of text and icons. Tags & chips make it easier to browse throughout articles, comments, or pages.

The tags can be used together with a chip-list to streamline the interaction between the two components. This directive adds chip-specific behaviors to the input element with in <input> or <select> for adding and removing chips. The <input>  can be placed inside or outside the chip-list element.

HTML

<!DOCTYPE html>
<html ng-app="tags">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Tags</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script src="app.js"></script>
  </head>

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

</html>

app.js

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

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { text: 'Tag1' },
    { text: 'Tag2' },
    { text: 'Tag3' }
  ];
   
  $scope.loadTags = function(query) {
    return $http.get('tags.json');
  };
});

tags.json

[
  { "text": "Tag1" },
  { "text": "Tag2" },
  { "text": "Tag3" },
  { "text": "Tag4" },
  { "text": "Tag5" },
  { "text": "Tag6" },
  { "text": "Tag7" },
  { "text": "Tag8" },
  { "text": "Tag9" },
  { "text": "Tag10" }
]

Output

Multiple Tags in the Select dropdown with Angular JS

Also Check out Tags or Chips with Bootstrap

If you interested in the Entertainment genre please check this also All Wikibiography

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice