Visibility with AngularJS

Question

I'm new to angular and have this simple problem. I have a button,when i click i want to show a grid and some filters that are invisble.The filters are like this.

<div ng-show="filtroFilial" style="visibility: hidden" class="col-md-2">
   <div class="form-group">
      <label>Estado da Filial</label>
      <div class="form-group form-md-line-input  no-hint right" style="padding-top: 3px;">
         <select id="regional" name="regional" chosen width="150" allow-single-deselect="true" ng-model="vm.relatorio.regional" style="width:100%"
            ng-options="regional.Cod_Regional as regional.Nom_Regional for regional in vm.regionais | orderBy:'Nom_Regional'" ></select>
      </div>
   </div>
</div>

And the grid is like this.(The beggining)

<div id="divSilt" style="overflow-x: hidden;">
<div class="row">
<div class="col-md-12">
<div class="portlet light form-fit bordered" style="padding: 10px 20px 0 20px;">
<div class="portlet-body form">
<div class="tabbable tabbable-tabdrop">
<ul class="nav nav-tabs">

This is my screen.

When i click "Aplicar Filtros" i want to show everthing that was hidden. I use ng-show or just ID ? This is my .js,

vm.filtrar = function() {
    $scope.$parent.vm.loading = $http({
        method: 'Post',
        url: _obterUrlAPI() + "AcompanhamentoSilt/FiltroSilt",
        dataType: "jsonp"
    }).then(function successCallback(response) {
        vm.importacaoSilt = response.data;
    }, function errorCallback(response) {
        MessageBox("Erro", response.data.Message);
    });
};

if the return is sucess i want to show everything that will be like this.How can change the visibility?Is in the js i put above?

Why are you adding visibilty hidden to a div with an ng-show? — manneJan89
– manneJan89, Commented Feb 24, 2017 at 17:09
just put scope.showOthers = false before your http. and then in your http once you have successfuly got your information change scope.showOthers = true and then in div ng-show = showOthers — Smit
– Smit, Commented Feb 24, 2017 at 17:09

manneJan89 · Accepted Answer · 2017-02-24 17:17:42Z

2

All that you need to do is add an ng-show="false".

Then all you need to do is add an ng-click to a button that changes the variable that is showing/hiding the div. so in other words you should have something like this:

<div ng-show="showMe">
    this is hidden on load
</div>

And in your controller:

$scope.showMe = false;

This means your div is hidden when the page loads. Now you call a funtion to show the div

<button ng-click="showAll()"></button>

And in your controller

$scope.showAll = function(){
    $scope.showMe = true;
}

This will change the variable which shows/hide the div.

answered Feb 24, 2017 at 17:17

manneJan89

1,0149 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

manneJan89 Over a year ago

Cool. Happy coding!

Collectives™ on Stack Overflow

Visibility with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related