JSFiddle - React, Tailwind, and code Playground

by lev milov

HTML

<div ng-app="todoApp" ng-controller="todoController">

  <form ng-submit="add()">
    <input ng-model="title">
    <button>Add</button>

  </form>
  <br />
  <input type="text" placeholder="Поиск по словам" ng-model="searchWords">
  <answer-list></answer-list>
  
</div>

JavaScript

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

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

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

  $scope.tasks = [];
  $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('answerList', function () {
	return {
			restrict: 'E',
      replace: true, // Replace with the template below
      transclude: true, // we want to insert custom content inside the directive
			template:"<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:'dd-MM-yyyy HH:mm:ss' }}</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>"
    }
});