JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<body ng-app ng-controller="TodoCrtlUpdate">  
      <h1>Todo List</h1>  
      <form ng-submit="addItem()">  
        <input type="text" ng-model="newItem" name="newItem" />  
        <input type="submit" id="submit" value="新增待辦事項" />  
      </form>  
      <ul id="todo">  
        <li ng-repeat="item in todoList | filter:{isFinish:false}">  
          <div ng-hide="item.editing"><input type="checkbox" ng-click="removeItem(item)"><span ng-dblclick="edit(item)">{{item.label}}</span></div>  
          <div ng-show="item.editing"><input type="text" value="{{item.label}}" ng-model="item.label"><button ng-click="save(item)">儲存</button></div>  
        </li>  
      </ul>  
  
      <hr>  
  
      <h1>Finished!</h1>    
      <ul id="finish">  
        <li ng-repeat="item in todoList | filter:{isFinish:true}">  
          {{item.label}}  
        </li>  
      </ul>  
  </body>

JavaScript

/*AngularJS Todo List Edit Update Test*/
function TodoCrtl($scope) {
  $scope.newItem = '';
  $scope.todoList = [];
  $scope.addItem = function(){
    if(this.newItem){
       this.todoList.push({label:this.newItem});
       this.newItem = '';
    }
   
  }
} 
    
    
function TodoCrtlRemovable($scope) {
  $scope.newItem = '';
  $scope.todoList = [];
  $scope.addItem = function(){
    if(this.newItem){
       this.todoList.push({label:this.newItem,isFinish:false});
       this.newItem = '';
    }   
  }   
      
  $scope.removeItem = function(item){
      item.isFinish = true;
  }       
}       
      
 
/*Angular*/
function TodoCrtlUpdate($scope) {
  $scope.newItem = '';
  $scope.todoList = [];
  $scope.addItem = function(){
    if(this.newItem){
       this.todoList.push({label:this.newItem,isFinish:false});
       this.newItem = '';
    } 
  }
 
  $scope.removeItem = function(item){
      item.isFinish = true;
  }
 
 
  $scope.edit = function(item){
      item.editing = true;
  }
 
  $scope.save = function(item){
    /*delete item.editing;*/
      item.editing = false;
  }
}