JSFiddle - React, Tailwind, and code Playground

by lev milov

HTML

<div ng-app="todoApp" ng-controller="todoController">
  
  <my-border>
 <form ng-submit='add()'>
   <input ng-model='title'> 
   <button>Add</button>
 </form> <br />
 <input type='text' placeholder='Поиск по словам' ng-modle='searchWords'> 
 
 <div class='stid'>
   <ul> 
     <li ng-repeat='task in tasks |   filter:searchWords:task.text | orderBy:sortType:sortReverse track by $index'>      
     <div ng-if='!task.edit'>
     <span >{{ task.text }}. - {{ task.data | date:format }}</span>
     <button  ng-click='delete(task)'>x</button>
     <button  ng-click='change(task)'>&#9999;</button> </div>
     <input type='text' ng-model='task.text' ng-if='task.edit' />
     <button ng-if='task.edit' ng-click='task.edit = false'>Save</button>
     </li>
   </ul>
 </div>
  </my-border>
  
</div>

JavaScript

var todoApp = angular.module('todoApp', []);

todoApp.controller('todoController', function($scope) {

  $scope.sortType = 'text'; // значение сортировки по умолчанию
  $scope.sortReverse = false; // обратная сортривка
  $scope.searchWords = ''; // значение поиска по умолчанию

  $scope.tasks = [];
  $scope.format = 'M/d/yy h:mm:ss a';
  $scope.add = function() {
    $scope.tasks.push({
      text: $scope.title,
      data: new Date().getTime(),
      edit: false
    });
  }
  $scope.delete = function(removedTask) {
    $scope.tasks = $scope.tasks.filter(function(task) {
    	return task !== removedTask;
    })
  }
  $scope.change = function(task) {
    task.edit = true;
  }
});
todoApp.directive('myBorder', function () {
	return {
			restrict: 'E',
      transclude: true, // we want to insert custom content inside the directive
			template:"<div style='border:1px solid #000; padding:10px;'><div ng-transclude></div> </div>"
    }
});