TODO List In Service Portal

<div>
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      ng-model="item"
      placeholder="Enter an item"
    />
  </div>
  <button class="btn btn-success btn-block" ng-click="c.addItem()">
    Add Item
  </button>

  <div class="list-container">
    <ul class="list-group">
      <li
        class="list-group-item"
        ng-repeat="(index,value) in c.data"
        ng-click="c.deleteItem(index,value)"
      >
        {{value}}
      </li>
    </ul>
  </div>
</div>

.list-container{
    margin:20px 0;
}
li{
    transition:all 0.5s ease-in-out;
  cursor:pointer;
}
li:hover{
    transform:translateX(20px);
}

api.controller = function ($scope, spUtil) {
  /* widget controller */
  var c = this;

  c.data = []; // array that contains data

  // add item function to add data to array
    c.addItem = function () {
    var item = $scope.item;
    c.data.push(item);
    $scope.item = "";
  };

  // delete item function to remove data from array
    c.deleteItem = function (indexToRemove, value) {
    if (indexToRemove > -1) {
      c.data.splice(indexToRemove, 1);
      spUtil.addInfoMessage(value + " Removed from the list");
    }
  };
};

Output

Repository

Get the code for this widget from GitHub