JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<div ng-app ng-controller="postCtrl" >
    <ul>
        <li ng-repeat="post in posts">
            <div ng-show="!post.isEditing">
                {{post.post}}                
            </div>
            <form ng-show="post.isEditing">
                <input ng-model="post.post"/>
            </form>
            <a ng-click="post.isEditing = !post.isEditing">edit</a>
        </li>
    </ul>
    <form ng-submit="addPost()">
        <label>add Post</label>
        <input ng-model="editPost"/>
        <button>Submit</button>
    </form>
    <button ng-click="alertPosts()">Alert Posts</button>
</div>

CSS

a{
    color:blue;
}

JavaScript

function postCtrl($scope){
    $scope.posts = [
        {
            post : "hello world",
            isEditing : false
        },{
            post : "hey Joe!",
            isEditing : false
        }
    ];
    
    $scope.addPost = function(){
        $scope.posts.push({ 
            post : $scope.editPost,
            isEditing : false
        });
        $scope.editPost = '';
    };
    
    $scope.alertPosts = function(){
        alert(JSON.stringify($scope.posts));
    };
};