How do i hide and show button on data in html control change

Nepethya Rana

I have an application which has two buttons 'btnGetData' and 'btnExport'.
There is also filter box to filter the data.
Clicking 'btnGetData' brings the data from database and displays the table and displays 'btnExport' in the top bar.
Clicking 'btnExport' same query as 'btnGetData' and exports the data to excel file.

Now what happening is if I give value in filter box and call btnExport prior to calling btnGetData, I will get Excel file with filtered data.
I do not want this to happen. I want If any change in filter box should be disable to btnExport
and it only be able if there is no any change in filter value provided.

I have used angular js. so value in filter box gets binded to ng-model.
btn call to backend is done via angular js function call.

HTML:

angular jS File :

$scope.FilterChange = function(){
hideExportBtn = true;
}

Doing this works fine. It hides the btnExport. but if i change my filter back to previous value. btnExport does not show.
How do i make it possible to track change and hide and display btnExport?

I am beginner in angular js.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Hamid Khan9y ago
you should use ng-if,
so that if your condition will be true, then it will show your buttton, otherwise hide,
the big benifit is using ng-if than (ng-show, ng-hide) dom will not load in your application, if condition will be false, that will improve slightly your application performance.,
if you go in deep level/large application.
Sathya Sambath9y ago
hi ..
please refer this link
https://www.aspsnippets.com/Articles/AngularJS-Show-Hide-Toggle-HTML-DIV-on-Button-click-using-ng-show-and-ng-hide.aspx
Gokhul Varman9y ago
please refer the link for more detailed explanation:https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp