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">
  <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 answer-list="question"></div>
  
</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 function (scope, element, attrs) {

    }
});