Hai Everyone.... Is there any way to call Angular function using Next and Previous Button....? i have four function fun1,fun2,fun3,fun4...When page loads fun1 should be called..if i click on next button means fun2 should be call..if i click again next button then fun3 should be call similarly fun4.... In the same way if i click previous button means it should call previous function... for example...fun2 to fun1 similarly for other function also....
please Help me to find out solution for this.... Thank You....
I have Used ng-hide and ng-show based on my requirement....to show particular div like Request Address comments and Bank Details...
And in the above of my page i provided four button like Request Address Comments and Bank Details if the user click on Request then the Request div shown...similarly for others also...and it will work fine... But the requirement is slightly changed instead of clicking on particular button we have to give next and previous button to activate the div.. Below i added my code please verify it.
This code shows four button on top of my web page....
<div class="row btn-group" style="width:50%;margin-left: 0px" ng-init="style={'background-color' : 'green'};yash={'background-color' : 'green'}">
<div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" style="background-color: green"; ng-style="style1" ng-click="requestEditbtn();style1=style;style2=null;style3=null;style4=null"
>Request</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-style="style2"ng-click="addressEditbtn();style2=style;style1=null;style3=null;style4=null">Address</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-style="style3" ng-click="commentEditbtn();style3=style;style1=null;style2=null;style4=null";>Comments</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-style="style4" ng-click="bankEditbtn();style4=style;style1=null;style2=null;style3=null">BankDetails</button>
</div>
</div>
</div>
This code shows the particular div on button click
<div class="container-fluid" ng-cloak>
<form name="RequestForm">
<div class="Request cls1" ng-hide="Request=='false'">
<div class="form-group">
<input type="text" placeholder="Requested For" ng-model="Name" maxlength="21" ng-maxlength="20" name="requestname" required id="capital">
<div ng-if="RequestForm.requestname.$touched || signupSubmitted">
<p ng-show="RequestForm.requestname.$error.required" class="help-block">Requester Name is Required</p>
</div>
<span ng-show="!RequestForm.requestname.$error.required && RequestForm.requestname.$error.maxlength && RequestForm.requestname.$dirty" class="help-block">Maximum 20 Characters</span>
</div>
<div class="row">
<div class="form-group col-xs-6" id="default" >
<input type="text" ng-model="default" id="default" readonly>
</div>
<div class="form-group col-xs-6">
<input type="text" placeholder="Mobile Number" ng-model="MobileNo" name="mobile" required ng-maxlength="10" maxlength="11" id="default1" >
<div ng-if="RequestForm.mobile.$touched || signupSubmitted">
<p ng-show="RequestForm.mobile.$error.required" class="help-block"> Mobile No is Required</p>
</div>
<span ng-show="!RequestForm.mobile.$error.required && RequestForm.mobile.$error.maxlength && RequestForm.mobile.$dirty" class="help-block">Maximum 10 Number</span>
</div>
</div>
<div>
<p id="label">Firm Code:</p>
<select ng-model="DeptName" ng-change="productFetch(DeptName)">
<option ng-repeat = "newdeptname in deptname">{{newdeptname.FirmCode}}</option>
</select>
</div>
<div class="clear-fix"></div><br><br>
<div>
<p id="label">Products:</p>
<select ng-model="yash" >
<option>--select--</option>
<option ng-repeat = "yash in yashwanth">{{yash.ProductName}}</option>
</select>
</div><br>
<div class="form-group">
<input type="text" placeholder="Amount" ng-model="Amount" required ng-maxlength="20" maxlength="21" name="amount" requried>
<div ng-if="RequestForm.amount.$touched || signupSubmitted">
<p ng-show="RequestForm.amount.$error.required" class="help-block"> Amount is Required</p>
</div>
<span ng-show="!RequestForm.amount.$error.required && RequestForm.amount.$error.maxlength && RequestForm.amount.$dirty" class="help-block">Maximum 20 Number</span>
</div>
<div class="form-group">
<input type="text" placeholder="Request Purpose" ng-model="RequestPurpose" name="purpose" required ng-maxlength="20" maxlength="21">
<div ng-if="RequestForm.purpose.$touched || signupSubmitted">
<p ng-show="RequestForm.purpose.$error.required" class="help-block"> Request Purpose is Required</p>
</div>
<span ng-show="!RequestForm.purpose.$error.required && RequestForm.purpose.$error.maxlength && RequestForm.purpose.$dirty" class="help-block">Maximum 20 Charactersxd</span>
</div>
</div>
<div class="Comments cls2" ng-show="Comments=='true'">
<div class="form-group">
<textarea rows="4" cols="50" placeholder="Enter Comments Here" ng-model="jaiGanesh" name="comments" required ng-maxlength="200" maxlength="201"></textarea>
<div ng-if="RequestForm.comments.$touched || signupSubmitted">
<p ng-show="RequestForm.comments.$error.required" class="help-block"> Comment is Required</p>
</div>
<span ng-show="!RequestForm.comments.$error.required && RequestForm.comments.$error.maxlength && RequestForm.comments.$dirty" class="help-block">Maximum 200 Characters</span>
</div>
</div>
</form>
</div>
Similarly for other div also....
Here is the controller code to hide and show the particular div....
$scope.requestEditbtn=function(Request)
{
$scope.Request="true";
$scope.Address="false";
$scope.Comments="false";
$scope.Bank="false";
}
$scope.addressEditbtn=function(Address)
{
$scope.Request="false";
$scope.Address="true";
$scope.Comments="false";
$scope.Bank="false";
}
$scope.commentEditbtn=function(Address)
{
$scope.Comments="true";
$scope.Address="false";
$scope.Request="false";
$scope.Bank="false";
}
$scope.bankEditbtn=function(Address)
{
$scope.Comments="true";
$scope.Address="false";
$scope.Request="false";
$scope.Bank="false";
}
