1. 技术文章
  2. Angular ng-click : Only want user to click once not multiple times on a rating system

Angular ng-click : Only want user to click once not multiple times on a rating system

由 混江龙づ霸主 提交于 2021-02-05 09:11:45

问题


Objective : Only want user to click once not multiple times on a rating system 

<div class="votingButton" ng-click="upVoteOrder(order)">
                            </div>

is this easily achievable on the html or the controller ?


回答1:


Have a scope variable to check if the Vote button is clicked..! if once clicked update the scope variable so that it gets disabled. The scope variable can be an attribute in the user model so that it carries ahead.




回答2:


Try this:

<button class="votingButton" ng-click="upVoteOrder(order)" ng-disabled="buttonClicked"></button>

and inside the upVoteOrder function add:

$scope.buttonClicked = true;



回答3:


A simple way is to add key and value to the order object in the controller. 

  <button type="button" ng-click="upVoteOrder(order)">vote up</button>  
    ///ctrl.js
    $scope.upVoteOrder = function (order) {
           var voted = true;
           var votedValue = 'Up vote complete!';
           order.voted = voted;
           order.votedValue = votedValue;
     }

if order.voted is true disabled the button

<!-- index.html --> 
<div>
  <button type="button" ng-click="upVoteOrder(order)" ng-disabled="order.voted">vote up</button>
  <p ng-if="order.voted">{{ order.votedValue }}. Thank you for voting!</p>
</div>



回答4:


You can use us ng-if to hide the html altogether once a click is registered. That way, you don't need to create a button to benefit from what ng-disabled does. The Angular 2 way of doing it is:

<div *ngIf="upVoted(order)"...

Use a function that returns true for index value of your *ngFor loop.




回答5:


    <div class="container ">

        <div class="row">

           <div class="col-md-3"></div>
           <div class="col-md-6">

              <form #ref="ngForm" (ngSubmit)="addfirst(ref3.value)">

<!-- GENERAL -->
<div *ngIf="!b"> <h3 class="text-primary">GENERAL</h3>
                 <div class="form-group">
                    <label>EMP NUMBER</label>
                    <input type="number" class="form-control round3 " id="empno" placeholder=" Emp Number"
                       name="empnober" ngModel #ref1="ngModel" required>
                    <label *ngIf="ref1.invalid && ref1.touched ">
                       <div class="text-danger"> *emp num field is mandatory </div>
                    </label>
                 </div>
                 <div class="form-group">
                    <label> FIRST NAME</label>
                    <input type="text" class="form-control round3 " id="firstname" placeholder="FIRST NAME" name="firstname"
                       ngModel #ref2="ngModel" required>
                    <label *ngIf="ref2.invalid && (ref2.dirty || ref2.touched )">
                       <div class="text-danger"> *firstname field is mandatory </div>
                    </label>
                 </div>
                 <div class="form-group">
                 <div class="LAST NAME">
                    <label>LAST NAME  </label>
                    <input type="text" class="form-control round3 " id="lastname" placeholder="LAST NAME " name="lastname" ngModel
                       #ref3="ngModel" required>
                    <label *ngIf="ref3.invalid && (ref3.dirty || ref3.touched )">
                       <div class="text-danger"> *last name field is mandatory </div>
                    </label>
                 </div>
                 </div>

                 <div class="form-group">
                  <label> MIDDLE NAME </label>
                  <input type="text" class="form-control round3 " id="middlename" placeholder="MIDDLE NAME " name="middlename" ngModel
                     #ref4="ngModel" required>
                  <label *ngIf="ref4.invalid && (ref4.dirty || ref4.touched )">
                     <div class="text-danger"> *middle name field is mandatory </div>
                  </label>
               </div>

               <div class="form-group">
                <label> ADDRESS </label>
                <input type="text" class="form-control round3 " id="address" placeholder="ADDRESS" name="address" ngModel
                   #ref5="ngModel" required>
                <label *ngIf="ref5.invalid && (ref5.dirty || ref5.touched )">
                   <div class="text-danger"> *address  field is mandatory </div>
                </label>
             </div>

             <div class="form-group">
              <label> ADDRESS 2 </label>
              <input type="text" class="form-control round3 " id="address2" placeholder="ADDRESS 2" name="address2" ngModel
                 #ref6="ngModel" required>
              <label *ngIf="ref6.invalid && (ref6.dirty || ref6.touched )">
                 <div class="text-danger"> *address2  field is mandatory </div>
              </label>
           </div>


<!-- <div class="text-right">
<a href="#" class="next">Next &raquo;</a>
</div> -->

<div >

           <div class="form-group">
            <label> POST CODE </label>
            <input type="number" class="form-control round3 " id="postcode" placeholder=" POSTCODE " name="postcode" ngModel
               #ref7="ngModel" required>
            <label *ngIf="ref7.invalid && (ref7.dirty || ref7.touched )">
               <div class="text-danger"> *postcode  field is mandatory </div>
            </label>
         </div>

         <div class="form-group">
          <label>  CITY </label>
          <input type="text" class="form-control round3 " id="city" placeholder="CITY " name="city" ngModel
             #ref8="ngModel" required>
          <label *ngIf="ref8.invalid && (ref8.dirty || ref8.touched )">
             <div class="text-danger"> *city field is mandatory </div>
          </label>
       </div>

       <div class="form-group">
        <label> PHONE NUMBER  </label>
        <input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
           #ref9="ngModel" required>
        <label *ngIf="ref9.invalid && (ref9.dirty || ref9.touched )">
           <div class="text-danger"> *phone number field is mandatory </div>
        </label>
     </div>

     <div class="form-group">
      <label> MOBILE NUMBER  </label>
      <input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
         #ref10="ngModel" required>
      <label *ngIf="ref10.invalid && (ref10.dirty || ref10.touched )">
         <div class="text-danger"> *mobilenumber field is mandatory </div>
      </label>
   </div>

   <div class="form-group">
    <label> REPORTING TO </label>
    <input type="text" class="form-control round3 " id="reportingto" placeholder=" REPORTING TO " name="reportingto" ngModel
       #ref11="ngModel" required>
    <label *ngIf="ref11.invalid && (ref11.dirty || ref11.touched )">
       <div class="text-danger"> *reporting to field is mandatory </div>
    </label>
 </div>

<div class="form-group">
  <label> REPORTING NAME </label>
  <input type="text" class="form-control round3 " id="reportingname" placeholder="REPORTING NAME" name="reportingname" ngModel
     #ref12="ngModel" required>
  <label *ngIf="ref12.invalid && (ref12.dirty || ref12.touched )">
     <div class="text-danger"> *reporting name field is mandatory </div>
  </label>
</div>

<div class="form-group">
    <label> GENDER </label>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="male" name="gender" [(ngModel)]="gender"  #ref13="ngModel" required #genderControl="ngModel"> Male &nbsp;
<input type="radio" value="female" name="gender" [(ngModel)]="gender"  #ref13="ngModel" required> Female  &nbsp;
<input type="radio" value="others" name="gender" [(ngModel)]="gender"  #ref13="ngModel" required> others &nbsp;
<label *ngIf="ref13.invalid && (ref13.dirty || ref13.untouched )">
    <div class="text-danger"> *select gender mandatory </div>
 </label>
</div>
<div class="form-group">
  <label> LOCATION CODE </label>
  <input type="text" class="form-control round3 " id="lctncode" placeholder="LOCATION CODE" name="lctncode" ngModel
     #ref14="ngModel" required>
  <label *ngIf="ref14.invalid && (ref14.dirty || ref14.touched )">
     <div class="text-danger"> *location code field is mandatory </div>
  </label>
</div>
<div class="text-right">
    <button class="btn btn-success" type="button" (click)="next()">Next</button> </div>

</div>

</div>
              </form>



<!-- COMMUNICATION -->
<form #ref1="ngForm">
<div *ngIf="b && !communication" >
<h3 class="text-primary">COMMUNICATION</h3>
<div class="form-group">
    <label> PHONE NUMBER  </label>
    <input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
       #ref15="ngModel" required>
    <label *ngIf="ref15.invalid && (ref15.dirty || ref15.touched )">
       <div class="text-danger"> *phone number field is mandatory </div>
    </label>
 </div>
 <div class="form-group">
  <label> MOBILE NUMBER  </label>
  <input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
     #ref16="ngModel" required>
  <label *ngIf="ref16.invalid && (ref16.dirty || ref16.touched )">
     <div class="text-danger"> *mobilenumber field is mandatory </div>
  </label>
</div>

<div class="form-group">
    <label> E-MAIL  </label>
    <input type="email" class="form-control round3 " id="email" placeholder="E-MAIL ADDRESS" name="email" ngModel
       #ref17="ngModel" required>
    <label *ngIf="ref17.invalid && (ref17.dirty || ref17.touched )">
       <div class="text-danger"> *email field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> COMPANY E-MAIL  </label>
    <input type="email" class="form-control round3 " id="cemail" placeholder="COMPANY E-MAIL ADDRESS" name="cemail" ngModel
       #ref18="ngModel" required>
    <label *ngIf="ref18.invalid && (ref18.dirty || ref18.touched )">
       <div class="text-danger"> *company email field is mandatory </div>
    </label>
 </div>
 <div class="text-right">
    <button class="btn btn-success" type="button" (click)="secondNext()">Next</button>

</div>
</div>
</form>
<!-- ADMINISTRATION -->
<form #ref2="ngForm">

<div *ngIf="communication && !administration">
 <h3 class="text-primary">ADMINISTRATION</h3>

    <div class="form-group">
        <label>DESIGNATION  </label>
        <input type="text" class="form-control round3 " id="designation" placeholder="DESIGNATION" name="designation" ngModel
           #ref19="ngModel" required>
        <label *ngIf="ref19.invalid && (ref19.dirty || ref19.touched )">
           <div class="text-danger"> *designation field is mandatory </div>
        </label>
     </div>

     <div class="form-group">
        <label>QUALIFICATION  </label>
        <input type="text" class="form-control round3 " id="qualification" placeholder="QUALIFICATION" name="qualification" ngModel
           #ref20="ngModel" required>
        <label *ngIf="ref19.invalid && (ref20.dirty || ref20.touched )">
           <div class="text-danger"> *qualification field is mandatory </div>
        </label>
     </div>

     <div class="form-group">
        <label>HEIGHT  </label>
        <input type="number" class="form-control round3 " id="height" placeholder="HEIGHT" name="height" ngModel
           #ref21="ngModel" required>
        <label *ngIf="ref21.invalid && (ref21.dirty || ref21.touched )">
           <div class="text-danger"> *height field is mandatory </div>
        </label>
     </div>

     <div class="form-group">
        <label> WEIGHT  </label>
        <input type="number" class="form-control round3 " id="weight" placeholder="WEIGHT" name="weight" ngModel
           #ref22="ngModel" required>
        <label *ngIf="ref22.invalid && (ref22.dirty || ref22.touched )">
           <div class="text-danger"> *weight field is mandatory </div>
        </label>
     </div>

     <div class="form-group">
        <label> EXPERIENCE </label>
        <input type="number" class="form-control round3 " id="experience" placeholder="EXPERIENCE" name="experience" ngModel
           #ref23="ngModel" required>
        <label *ngIf="ref23.invalid && (ref23.dirty || ref23.touched )">
           <div class="text-danger"> *experience field is mandatory </div>
        </label>
     </div>
     <div class="text-right">
        <button class="btn btn-success" type="button" (click)="thirdNext()">Next</button>

    </div>
</div>
</form>
<!-- PERSONAL -->
<form #ref2="ngForm">
<div *ngIf="administration && !paymethod">
<h3 class="text-primary" >PERSONAL</h3>

<div class="form-group">
    <label> DATE OF BIRTH</label>
    <input type="date" class="form-control round3 " id="dob" placeholder="DATE OF BIRTH" name="dob" ngModel
       #ref24="ngModel" required>
    <label *ngIf="ref24.invalid && (ref24.dirty || ref24.touched )">
       <div class="text-danger"> *date of birth field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> FATHER/HUSBAND NAME </label>
    <input type="text" class="form-control round3 " id="fhname" placeholder="FATHER/HUSBAND NAME" name="fhname" ngModel
       #ref25="ngModel" required>
    <label *ngIf="ref25.invalid && (ref25.dirty || ref25.touched )">
       <div class="text-danger"> *father/husband  field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> CURRENT AGE (YEARS)</label>
    <input type="number" class="form-control round3 " id="cage" placeholder="CURRENT AGE (YEARS)" name="cage" ngModel
       #ref26="ngModel" required>
    <label *ngIf="ref26.invalid && (ref26.dirty || ref26.touched )">
       <div class="text-danger"> *current age (years) field is mandatory </div>
    </label>
 </div>



 <div class="form-group">
    <label> CURRENT AGE (MONTHS)</label>
    <input type="number" class="form-control round3 " id="cagem" placeholder="CURRENT AGE (MONTHS)" name="cagem" ngModel
       #ref27="ngModel" required>
    <label *ngIf="ref27.invalid && (ref27.dirty || ref27.touched )">
       <div class="text-danger"> *current age (months) field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> BLOOD GROUP</label>
    <input type="text" class="form-control round3 " id="bloodgrp" placeholder="BLOOD GROUP" name="bloodgrp" ngModel
       #ref28="ngModel" required>
    <label *ngIf="ref28.invalid && (ref28.dirty || ref28.touched )">
       <div class="text-danger"> *bloodgroup field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> NATIONALITY</label>
    <input type="text" class="form-control round3 " id="nationality" placeholder="NATIONALITY" name="nationality" ngModel
       #ref29="ngModel" required>
    <label *ngIf="ref29.invalid && (ref29.dirty || ref28.touched )">
       <div class="text-danger"> *nationality field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
    <label> PRESENT ADDRESS </label>
    <input type="text" class="form-control round3 " id="paddress" placeholder="PRESENT ADDRESS" name="paddress" ngModel
       #ref30="ngModel" required>
    <label *ngIf="ref30.invalid && (ref30.dirty || ref30.touched )">
       <div class="text-danger"> *presentaddress  field is mandatory </div>
    </label>
 </div>

 <div class="form-group">
  <label>PRESENT ADDRESS 2 </label>
  <input type="text" class="form-control round3 " id="paddress2" placeholder="PRESENT ADDRESS 2" name="paddress2" ngModel
     #ref31="ngModel" required>
  <label *ngIf="ref31.invalid && (ref31.dirty || ref31.touched )">
     <div class="text-danger"> *presentaddress2  field is mandatory </div>
  </label>
</div>

<div class="form-group">
    <label>PRESENT CITY</label>
    <input type="text" class="form-control round3 " id="pcity" placeholder="PRESENT CITY" name="pcity" ngModel
       #ref32="ngModel" required>
    <label *ngIf="ref32.invalid && (ref32.dirty || ref32.touched )">
       <div class="text-danger"> *presentcity  field is mandatory </div>
    </label>
  </div>

  <div class="form-group">
      <label>PRESENT POST CODE </label>
      <input type="number" class="form-control round3 " id="pccode" placeholder="PRESENT CITY CODE" name="pccode" ngModel
         #ref33="ngModel" required>
      <label *ngIf="ref33.invalid && (ref33.dirty || ref33.touched )">
         <div class="text-danger"> *presentcitycode  field is mandatory </div>
      </label>
    </div>

    <div class="form-group">
        <label>PRESENT COUNTRY</label>
        <input type="text" class="form-control round3 " id="pcountry" placeholder="PRESENT COUNTRY" name="pcountry" ngModel
           #ref34="ngModel" required>
        <label *ngIf="ref34.invalid && (ref34.dirty || ref34.touched )">
           <div class="text-danger"> *presentcountry  field is mandatory </div>
        </label>
      </div>

      <div class="form-group">
          <label>PRESENT PHONE NUMBER</label>
          <input type="number" class="form-control round3 " id="pphnno" placeholder="PRESENT PHONE NUMBER" name="pphnno" ngModel
             #ref35="ngModel" required>
          <label *ngIf="ref35.invalid && (ref35.dirty || ref35.touched )">
             <div class="text-danger"> *presentphonenumber  field is mandatory </div>
          </label>
        </div>

        <div class="form-group">
            <label>ADDHAAR NUMBER</label>
            <input type="number" class="form-control round3 " id="aadhaar" placeholder="ADDHAAR NUMBER" name="aadhaar" ngModel
               #ref36="ngModel" required>
            <label *ngIf="ref36.invalid && (ref36.dirty || ref36.touched )">
               <div class="text-danger"> *aadhaar  field is mandatory </div>
            </label>
          </div>

          <div class="form-group">
              <label> PAN NUMBER  </label>
              <input type="text" class="form-control round3 " id="pannumber" placeholder=" PAN NUMBER " name="pannumber" ngModel
                 #ref41="ngModel" required>
              <label *ngIf="ref41.invalid && (ref41.dirty || ref41.touched )">
                 <div class="text-danger"> *pan number  field is mandatory </div>
              </label>
          </div>

          <div class="text-right">
              <button class="btn btn-success" type="button" (click)="fourthNext()">Next</button>

          </div>
</div>
</form>
<form #ref3="ngForm">
<!-- pay method -->
<div *ngIf="paymethod">
<h3  class="text-primary"> PAY METHOD </h3>
<div class="form-group">
      <label> BANK NAME </label>
      <input type="text" class="form-control round3 " id="bankname" placeholder="BANK NAME" name="bankname" ngModel
         #ref37="ngModel" required>
      <label *ngIf="ref37.invalid && (ref37.dirty || ref37.touched )">
         <div class="text-danger"> *bankname  field is mandatory </div>
      </label>
</div>
<div class="form-group">
    <label> BANK IFSC CODE </label>
    <input type="text" class="form-control round3 " id="bankifsccode" placeholder="BANK IFSC CODE" name="bankifsccode" ngModel
       #ref38="ngModel" required>
    <label *ngIf="ref38.invalid && (ref38.dirty || ref38.touched )">
       <div class="text-danger"> *bankifsccode  field is mandatory </div>
    </label>
</div>

<div class="form-group">
    <label> ACCOUNT TYPE</label>
    <input type="text" class="form-control round3 " id="accounttype" placeholder="ACCOUNT TYPE" name="accounttype" ngModel
       #ref39="ngModel" required>
    <label *ngIf="ref39.invalid && (ref39.dirty || ref39.touched )">
       <div class="text-danger"> *accounttype  field is mandatory </div>
    </label>
</div>

<div class="form-group">
    <label> ACCOUNT NUMBER  </label>
    <input type="text" class="form-control round3 " id="accountnumber" placeholder=" ACCOUNT NUMBER " name="accountnumber" ngModel
       #ref40="ngModel" required>
    <label *ngIf="ref40.invalid && (ref40.dirty || ref40.touched )">
       <div class="text-danger"> *accountnumber  field is mandatory </div>
    </label>
</div>

<div class="text-right">
    <button class="btn btn-success" type="submit">submit</button>
 </div>
</div>
 </form>
           </div>


来源：https://stackoverflow.com/questions/25384973/angular-ng-click-only-want-user-to-click-once-not-multiple-times-on-a-rating-s

标签
angularjs
directive
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!