JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js" ng:autobind></script>

<br/>
List of deletable tags
<br/>
<br/>
<div ng:controller="TagListCtrl" class="tag-list">
    <div class="label">Tags</div>
    <ul>
      <li ng:repeat="tag in tags">
          <span class="tag-text" ng:click="clickOnTag(this)">{{tag.text}}</span>
          <span class="button-delete" ng:click="removeTag(this)">x</span>
      </li>
   </ul>
</div>

CSS

body { font-family: sans-serif; font-size: small;}

li { display: inline; background-color: whitesmoke; padding: 2px 5px 3px 5px; margin: 2px; text-align: center; }

.button-delete { color: lightgrey; font-size: x-small; padding: 2px; cursor: pointer; }

.button-delete:hover { background-color: firebrick; color: white; }

.label { color: grey; padding-bottom: 5px; }

.tag-list { padding: 5px; border-radius: 5px; }

.tag-text { cursor: pointer; }
.tag-text:hover { text-decoration: underline; color: #06c; }

JavaScript

function TagListCtrl () {

    var scope = this;

    scope.tags = [
    
        { id: 1, text: "tv" },
        { id: 2, text: "casaco"},
        { id: 3, text: "gabardine"},
        { id: 4, text: "sapatos"},
        { id: 5, text: "saias"},
        { id: 6, text: "t-shirt"},
        { id: 7, text: "lcd"},
        { id: 8, text: "iPad"},
        { id: 8, text: "tablet"},
        { id: 8, text: "smartphone"},
        { id: 8, text: "chuteiras"},
        
    
    ];
    
    scope.removeTag = function (e) {
        
        var confirm = window.confirm('Are you sure you want to delete "' + e.tag.text + '" ?');
        
    };
    
    scope.clickOnTag = function(e) {
            
    
    }
}