Hide ng-repeat item after 5 seconds

Question

Hide ng-repeat item after 5 seconds

Navigation

#1 by (2 votes)

2

I'm doing a to do list app, I'd like to know how to hide an element after 5 seconds after I've selected the item through my checkbox.

I have the following HTML structure:

<body ng-controller="todoListCtrl">
  <div class="container">
    <div class="jumbotron">
      <h4><img src="img/list.png" id="icon-list"> {{app}} </h4>
      <table class="table ">
        <tr ng-class="{selecionado: item.selecionado}" ng-repeat="item in tarefas">
          <td><input type="checkbox"  ng-model="item.selecionado"></td>
          <td><input  type="text" ng-class="{selecionado: item.selecionado}"class="form-control" id="item" ng-model="item.titulo" ng-blur="item.modoEdicao = false" ng-focus="item.modoEdicao = true" ></td>
        </tr>
      </table>
      </hr>
      <form ng-submit="adicionarTarefa(item)">
        <input class="form-control" type="text" ng-model="item.titulo" placeholder="Escrever nova tarefa.." ng-keyup="$event.keyCode == 13 && (adicionarTarefa)"/>
      </form>
      <button class="btn btn-danger btn-block" ng-click="apagarTarefa(tarefas)">Apagar tarefa</button>
    </div>
  </div>
</body>

I have the following code JavaScript so far:

//localizando o modulo
angular.module("todoList").controller("todoListCtrl", function($scope) {
  $scope.app = "Minhas Tarefas";
  $scope.tarefas = [{
      titulo: "Fazer o documento do carro",
      modoEdicao: false
    },
    {
      titulo: "Solicitar emprestimo bancario",
      modoEdicao: false
    }
  ];

  //Comportamento do ng click - Cadastro tarefas
  $scope.adicionarTarefa = function(item) {
    $scope.tarefas.push(angular.copy(item));
  };

  //Comportamento do ng click - Apagar tarefas
  $scope.apagarTarefa = function(tarefas) {
    $scope.tarefas = tarefas.filter(function(item) {
      if (!item.selecionado) return item;
    });
  };
});

// function autoFocus (){
//   $('#teste').focus();
// };
$(document).ready(function() {
  setInterval(function() {
    $('#item').fadeOut(1500);
  }, 3000);
});

javascript angularjs

asked by anonymous 08.09.2017 / 16:29

1 answer

Controller getting parameter array as null How to change the color of several textbox by looking at only one condition

score 2 · Answer 1

You can use service $timeout in conjunction with ng-class to define a class after 5000 milliseconds (5 seconds) that will make the item disappear by assigning class escondido in the following example:

angular
  .module("todoList", [])
  .controller("todoListCtrl", todoListCtrl);

todoListCtrl.$inject = ['$timeout'];

function todoListCtrl($timeout) {
  var vm = this;
  
  vm.apagar = _apagar;

  vm.classes = [];
  vm.tarefas = [
    {titulo: "Fazer o documento do carro"},
    {titulo: "Solicitar emprestimo bancario"}
  ];

  function _apagar(indice) {
    $timeout(function() {
      vm.classes[indice] = 'escondido';
    }, 5000);
  };
};

.item {
  transition: all linear 0.5s;
  margin-top = 0px;
  display: block !important;
}
.item.escondido {
  opacity: 0;
  height: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="todoList" ng-controller="todoListCtrl as vm">
  <table class="table ">
    <tr ng-repeat="item in vm.tarefas" class="item" ng-class="vm.classes[$index]">
      <td><input type="checkbox" ng-model="item.selecionado" ng-click="vm.apagar($index)"></td>
      <td><span>{{item.titulo}}</span>
    </tr>
  </table>
</div>