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

Nepethya Rana

Nepethya Rana

Sep 29 2017 12:31 PM
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.
<input type="button" value="Export Data" ng-click="btnExport(flag,city, state, zip)" ng-show="ShowStoreTbl" ng-hide="hideExportBtn />

<input type="text" ng-model="city" ng-change="FilterChange()"/></td>
<input type="text" ng-model="state" ng-change="FilterChange()"/></td>
<input type="text" ng-model="zip" ng-change="FilterChange()"/></td>

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.

Upload Source Code  Select only zip and rar file.
Answers (3)