2017-02-24 3 views
0

私は角度が新しく、この単純な問題があります。 私はボタンをクリックしたときにグリッドを表示したいし、いくつかのフィルターが見えないようにしました。フィルターはこのようなものです。AngularJSとの視認性

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

、グリッド、このようなものです。(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"> 

これが私の画面です。 enter image description here

「Aplicar Filtros」をクリックすると、隠されたものがすべて表示されます。私は ng-showかIDだけを使用しますか?これは私の.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); 
    }); 
}; 

リターンは私がthis.Howは、可視性を変更することができようになり、すべてを表示したい成功事例のですか?私は上記置いjsの中でですか?

enter image description here

+0

ng-showでdivに非表示のビヘイビアを追加しているのはなぜですか? –

+0

httpの前に 'scope.showOthers = false'を置くだけです。あなたのhttpであなたの情報が成功したら 'scope.showOthers = true'に変更してからdiv' ng-show = showOthers' – Smit

答えて

2

あなたがする必要があるすべてはng-show="false"を追加しています。

divを表示/非表示にする変数を変更するボタンにng-clickを追加するだけです。

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

そして、あなたのコントローラで:

$scope.showMe = false; 

これはあなたのdivがページのロード時に隠蔽されていることを意味ので、他の言葉であなたはこのような何かを持っている必要があります。今、あなたは

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

および/はdivのを隠す示し変数を変更しますあなたのコントローラ

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

これにdiv要素を表示することが目的球を呼び出します。

+0

本当にうまくいった。 –

+0

クールです。ハッピーコーディング! –

関連する問題