调用angularjs功能使用下一个和上一个按钮

时间:2018-03-12 07:36:57

标签: angularjs

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";
}

UI Screen shot of my web page

0 个答案:

没有答案