JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="Controller as $ctrl">

  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Nr.</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in $ctrl.users">
        <td>
          {{$index + 1}}
        </td>
        <td>
          <a href="#" editable-text="user">
            {{user}}
          </a>
        </td>
        <td>
          <div class="btn-group">
            <span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <input ng-model="$ctrl.addMe" />
  <button ng-click="$ctrl.addUser()">Add</button>
  <p id="errormessage">{{$ctrl.errortext}}</p>

</div>

JavaScript

angular.module('app', ['xeditable'])
  .run(function(editableOptions) {
    editableOptions.theme = 'bs3';
  })
  .controller('Controller', function() {
    this.users = [
      "James",
      "Baktash",
      "Messi"
    ];

    this.addUser = function() {
      this.errortext = "";
      if (this.users.indexOf(this.addMe) == -1) {
        this.users.push(this.addMe);
      } else {
        this.errortext = "The user does already exist!";
      }
    }

    this.removeUser = function(user) {
      this.users.splice(user, 1);
      this.errortext = "";
    }
  });