Clear fields with Angularjs

Asked

Viewed 1,147 times

1

I have three tabs with content. Every interaction with the fields is controlled by Angularjs.

I need to clear the fields after changing tab (by clicking).

How can I do that?

inserir a descrição da imagem aqui

Html Code

<!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>

Javascript code

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";
        };

      }
javascript html angularjs

  • Your fields are linked to a certain class?

  • OK. Each field is linked to a class. And each tab has its class..

  • I took the Java tag because I think you confused it with Javascript.

  • Something like $Scope.Aba.Field = '' wouldn’t work? I don’t know what your controller’s structure looks like.

  • There are several fields...Who controls validations is the Angularjs....

1 answer

1


A proposal, to clear the fields at the time of choosing the flap.

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>

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.