JSFiddle - React, Tailwind, and code Playground

by csbenjamin

HTML

<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<div ng-app>
<div ng-controller="mycontroller">
    <input type="text" ng-model="myvar"><button ng-click="addname()">Add this</button>
    <div ng-repeat="o in array | orderBy:'name'" ng-animate="{enter: 'enter',leave: 'leave', move: 'move'}">
        {{o.name}} <button ng-click="removename(o.name)">Remove this</button>
    <div>
 </div>
        </div>

CSS

.enter-start,
.leave-start,
.move-start {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -ms-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  overflow:hidden;
}
 
.enter-setup {
  height:0px;
}
.enter-setup.enter-start {
  height:26px;
}
 
.leave-setup {
  height:26px;
}
.leave-setup.leave-start {
  height:0;
}

JavaScript

function mycontroller($scope){
    $scope.array = [
        {name:"João"}
        ,{name:"Pedro"}
        ,{name:"Carlos"}
        ,{name:"Frederico"}
        ,{name:"Miguel"}
    ]
    $scope.addname = function(){
        var newname = {name:$scope.myvar};
        $scope.myvar = "";
        $scope.array.push(newname);
    }
    $scope.removename = function(name){
        for(var i=0; i<$scope.array.length;i++){
            if($scope.array[i].name === name)
                break;
        }
        $scope.array.splice(i,1);
    }
}