1

Tenho três abas com conteúdo. Toda interação com os campos é controlada pelo AngularJS.

Necessito limpar os campos apos mudar de aba (ao clicar).

Como posso fazer isso?

inserir a descrição da imagem aqui

Codigo Html

<!DOCTYPE html>
<html>
<head>
  <title>
    Criando Abas
  </title>
  <meta charset="UTF-8" />
<style type="text/css">
    .abas {
    position: relative;
    }
    .aba {
    display: inline;
    }
    .aba > a {
    float: left;
    padding: 0.5em 1em;
    background: linear-gradient(#FFF, #EEE);
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #CCC #FFF;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    }
    .aba:not(:target) a {
    border-bottom: 0 none;
    }
    .aba:target a, a:hover {
    background: white;
    }
    .conteudo {
    position: absolute;
    left: 0;
    top: calc(2em + 4px); /* altura do link + bordas */
    z-index: -2;
    border: 1px solid #CCC;
    background-color: white;
    }
    .aba:target .conteudo {
    z-index: -1;
    }
  </style>

</head>
<body>
  <!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
    <li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
    <li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
    <li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
</body>
</html>

Codigo JavaScript

angular.module('xxxx').controller('xxxController', function ($scope) {
        var m = $scope;

          m.validarAba1 = function(){
           $scope.message = "TESTE1";
        };

          m.validarAba2 = function(){
           $scope.message = "TESTE2";
        };

          m.validarAba3 = function(){
           $scope.message = "TESTE3";
        };

      }
5
  • Seus campos estão ligados a uma classe certo? 9/02/2017 às 19:59
  • OK. Cada campo estão ligados ao uma classe. E cada aba tem sua classe.. 9/02/2017 às 20:01
  • Tirei a tag Java porque acho que você confundiu com JavaScript.
    – Jéf Bueno
    9/02/2017 às 20:02
  • Algo como $scope.Aba.Campo = '' não funcionaria? Não sei como está a estrutura da sua controller. 9/02/2017 às 20:04
  • São varios campos...quem controla validações é o angularjs.... 9/02/2017 às 20:10

1 Resposta 1

1

Uma proposta, para limpar os campos na hora da escolha da aba.

angular.module("app", [])
  .controller("ctrl", ["$scope",
    function($scope) {
      //da primeira aba
      $scope.t1 = '';
      $scope.t2 = '';
      //da segunda aba
      $scope.t3 = '';
      $scope.t4 = '';
      //da terceira aba
      $scope.t5 = '';
      $scope.t6 = '';

      $scope.abaClear = function(aba) {
        if (aba == '1') {
          $scope.t1 = '';
          $scope.t2 = '';
          $scope.elementFocus('#t1');
        } else if (aba == '2') {
          $scope.t3 = '';
          $scope.t4 = '';
          $scope.elementFocus('#t3');
        } else {
          $scope.t5 = '';
          $scope.t6 = '';
          $scope.elementFocus('#t5');
        }
      }
      $scope.elementFocus = function(obj) {
        var ele = angular
          .element(document.querySelector(obj));
        ele[0].focus();
      }

    }
  ]);
.abas {
  position: relative;
}
.aba {
  display: inline;
}
.aba > a {
  float: left;
  padding: 0.5em 1em;
  background: linear-gradient(#FFF, #EEE);
  border-width: 1px;
  border-style: solid;
  border-color: #CCC #CCC #FFF;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
.aba:not(:target) a {
  border-bottom: 0 none;
}
.aba:target a,
a:hover {
  background: white;
}
.conteudo {
  position: absolute;
  left: 0;
  top: calc(2em + 4px);
  /* altura do link + bordas */
  z-index: -2;
  border: 1px solid #CCC;
  background-color: white;
}
.aba:target .conteudo {
  z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul class="abas">
    <!-- Aqui, criação da primeira aba -->
    <li class="aba" id="aba-1">
      <a href="#aba-1" ng-click="abaClear('1')">Aba1</a>
      <section class="conteudo">
        <div>Conteúdo da Aba 1</div>
        <input ng-model="t1" type="text" id="t1" />
        <input ng-model="t2" type="text" id="t2" />
      </section>
    </li>
    <!-- Aqui, criação da segunda aba -->
    <li class="aba" id="aba-2">
      <a href="#aba-2" ng-click="abaClear('2')">Aba 2</a> 
      <section class="conteudo">
        <div>Conteúdo da Aba 2</div>
        <input ng-model="t3" type="text" id="t3" />
        <input ng-model="t4" type="text" id="t4" />
      </section>
    </li>
    <!-- Aqui, criação da terceira aba -->
    <li class="aba" id="aba-3">
      <a href="#aba-3" ng-click="abaClear('3')">Aba 3</a> 
      <section class="conteudo">
        <div>Conteúdo da Aba 3</div>
        <input ng-model="t4" type="text" id="t5" />
        <input ng-model="t5" type="text" id="t6" />
      </section>
    </li>
  </ul>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .