JSFiddle - React, Tailwind, and code Playground

Angular Tags JSON

by Andrew Pougher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<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://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>TAGS Angular</h4>
<div ng-app="app" ng-controller="Ctrl">
    


  <p ng-repeat="person in persons" class="badge badge-default tag" editable-text="person" onBeforesave="updateUser()">
    {{person}}
    </p>
  <div style="margin-top: 30px">
  {{ persons | json }}    
  </div>
    
</div>

CSS

div[ng-app] { margin: 50px; }

.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", "ngMockE2E"]);

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


app.controller('Ctrl', function($scope, $q, $http) {

$scope.persons = [
    'Andrew',
    'Susan',
    'Ferro',
    'Mary'
    ];




  $scope.updateUser = function() {
    return $http.post('/updateUser', $scope.persons);
  };
  

});

// mock `/updateUser` request
app.run(function($httpBackend) {
  $httpBackend.whenPOST(/\/updateUser/).respond(function(method, url, data) {
    data = angular.fromJson(data);
    alert(data)
    if(data.persons === 'error') {
      return [500, 'Error message']; 
    } else {
      return [200, {status: 'ok'}]; 
    }
  });
});