Как сделать замену отдельных элементов?

462

22 сентября 2017, 22:02

Как сделать так, чтобы по клику на конкретный div, он менялся на textarea и по клику на кнопку (в моем случае "Сохранить"), конкретная textarea менялась обратно на div?

Функция, которая привязана к ng-click:

$scope.mode = 'division';
$scope.EditTask = function (task) {
    if ($scope.mode == 'division') {
        $scope.mode = 'area';
    } else if ($scope.mode == 'area') {
        $scope.mode = 'division'
    }
};

HTML:

<div ng-repeat="task in tasks">
<div ng-switch on="mode">
    <div ng-switch-when="area">
        <textarea ng-model="task">{[ task.text_task ]}</textarea>
        <button ng-click="EditTask($event)">Сохранить</button>
        <button ng-click="DeleteTask(task)">Удалить</button>
    </div>
    <div ng-switch-when="division">
        <div ng-model="data" ng-click="EditTask($event)">{[ task.text_task ]}</div>
        <button ng-click="DeleteTask(task)">Удалить</button>
    </div>
</div>

Сейчас, когда я кликаю на div, все дивы меняются на textarea (что, в общем-то, логично, смотря на мой код), но мне нужно сделать как я описал в начале вопроса, но я не могу догадаться как это сделать.

Answer 1

В общем виде это надо делать так.

Пример на jsfiddle

angular.module('ExampleApp', []) 
  .controller('ExampleController', function() { 
    var vm = this; 
    vm.tasks = [{ 
      text_task: "text_task", 
      mode: 'area' 
    }, { 
      text_task: "text_task 1", 
      mode: 'area' 
    }, { 
      text_task: "text_task 2", 
      mode: 'area' 
    }, { 
      text_task: "text_task 3", 
      mode: 'area' 
    }]; 
    vm.EditTask = function(task) { 
      if (task.mode == 'division') { 
        task.mode = 'area'; 
      } else if (task.mode == 'area') { 
        task.mode = 'division' 
      } 
    }; 
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="ExampleApp"> 
  <div ng-controller="ExampleController as vm"> 
    <div ng-repeat="task in vm.tasks"> 
      <div ng-switch on="task.mode"> 
        <div ng-switch-when="area"> 
          <textarea ng-model="task.text_task"></textarea> 
          <button ng-click="vm.EditTask(task)">Сохранить</button> 
          <button ng-click="DeleteTask(task)">Удалить</button> 
        </div> 
        <div ng-switch-when="division"> 
          <div ng-click="vm.EditTask(task)">{{task.text_task }}</div> 
          <button ng-click="DeleteTask(task)">Удалить</button> 
        </div> 
      </div> 
    </div> 
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

На Wordpress не работаю скрипты

Я сверстал макет, после чего решил его натянуть на cms wordpress, подключил стили и скрипты в functionsphp, подключил все через функции wp_head() и wp_footer()

431

javascript