JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<h4>Edit Tags</h4>
<div ng-app="app" ng-controller="Ctrl">

<div class="panel panel-info">
<div class="panel panel-body">

  <p ng-repeat="tag in taglist | orderBy:'-tID'" class="badge badge-default tag" editable-text="tag.tagname" onAftersave="updateUser($data)">
    {{tag.tagname}}
    </p>
    </div>   </div>
    
    <div class="btn btn-default" ng-click="addNew()">+</div>
  <span ng-repeat="item in taglist | orderBy:'-tID'" assign-from-child="itemForm" to-parent="itemForms[{{$index}}]" class='badge tag'>
    <a ng-show="!itemForm.$visible" ng-click="itemForm.$show()" e-form="itemForm" editable-text="item.tagname">{{ item.tagname }}</a>

  </span>
  {{ array | json }} 
</div>

CSS

.tag{padding-bottom:3px;-webkit-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);display:inline-block;vertical-align:top;line-height:2em;padding-top:0;font-weight:bold;color:#505050;text-align:center;text-shadow:0 1px rgba(255,255,255,0.5);background:#eaefef;border:0px white;border-radius:2px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}

.tag:hover{color:white;background:#20aae5;text-decoration:none;text-shadow:0 1px rgba(0,0,0,0.15);outline:none;cursor:pointer}
	.tag:active,.tag:active{padding-bottom:2px;border-top:1px solid white;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 -2px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05)}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter, $timeout) {
    
  $scope.itemForms = {};
    
  $scope.taglist = [
    {tID: 1, tagname: 'andrew'},
    {tID: 2, tagname: 'susan'},
    {tID: 3, tagname: 'ferro'},
    {tID: 4, tagname: 'drew'}
  ]; 

  $scope.updateUser = function($data){
  alert($data);
     alert(angular.toJson($scope.taglist));
  }
  $scope.addNew = function(){
    $scope.taglist.push({tID:$scope.taglist.length+1, tagname: 'tag name'});
     $timeout(function() {
         $scope.itemForms[0].$show(); // last index since we sort descending, so the 0 index is always the newest
     })
  }
}).directive('assignFromChild', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            scope.$watch(function() { return $parse(attrs.assignFromChild)(scope); }, function(val) {
                $parse('$parent.' + attrs.toParent).assign(scope, val);
            })
        }
    };
});