Hai Everyone .... 有没有办法使用Next和Previous Button调用Angular函数....? 我有四个功能fun1,fun2,fun3,fun4 ...当页面加载fun1应该被调用..如果我点击下一个按钮意味着fun2应该被调用..如果我再次点击下一个按钮然后fun3应该同样调用fun4。 ... 以同样的方式,如果我点击上一个按钮意味着它应该调用前一个功能...例如... fun2到fun1同样适用于其他功能....
请帮我找出解决方案.... 谢谢....
我根据我的要求使用了ng-hide和ng-show ....以显示特定的div,如请求地址注释和银行详细信息......
在我的页面的上方,我提供了四个按钮,如请求地址评论和银行详细信息,如果用户点击请求,然后显示请求div ...类似的其他人也......并且它将正常工作... 但是要求略有改变,而不是单击特定按钮,我们必须给下一个和上一个按钮激活div .. 下面我添加了我的代码,请验证它。
此代码在我的网页顶部显示了四个按钮....
<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>
此代码显示按钮单击上的特定div
<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>
同样对于其他div也....
这是隐藏和显示特定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";
}