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

Related searches

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 ?


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.

Angular ng-click Directive, 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� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Try this:

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

and inside the upVoteOrder function add:

$scope.buttonClicked = true;

Top 18 Most Common AngularJS Mistakes That Developers Make , 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� 2 Angular ng-click : Only want user to click once not multiple times on a rating system Aug 19 '14. View all questions and answers → Badges (30) Gold. 2


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>

AngularJS to Angular concepts: Quick reference, AngularJS ng-click Directive. ❮ AngularJS Reference. Example. Increase the count variable by one, each time the button is clicked: <� The event directives allows us to run AngularJS functions at certain user events. The ng-click directive defines AngularJS code that If you want to show a


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.

It can be useful even when not using jQuery with its CSS, but should not be used It is basically an object set on the controller's scope, just like a normal model. If you do that multiple times in one flow, it might start running slow. and can be of better use inside Angular than jQuery (e.g. ng-click or the event system). Angular ngFor - Learn all Features including trackBy, why is it not only for Arrays? Last Updated: 24 April 2020 local_offer Angular Core In this post we are going to go over the ngFor core directive, namely we are going to go over the following:


    <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>

Templates are the user-facing part of an Angular application and are written in HTML. For more information, see the ngFor micro-syntax section of the Built-in In AngularJS, the ng-click directive allows you to specify custom behavior when an Rather, define one-way binding from the template view to the component� For many cases, there is an AngularJS solution which is tailored for AngularJS and can be of better use inside Angular than jQuery (e.g. ng-click or the event system). Reason 2: The method of thought about building the app. If you have been adding JavaScript to websites, which reload when navigating, you did not have to worry about memory


The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal (with the exception of the initial run, see below). Inequality is determined according to reference inequality, strict comparison via the !== Javascript operator, unless objectEquality == true (see next point)


Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.


Angular supports two design approaches for interactive forms. You can build forms by writing templates using Angular template syntax and directives with the form-specific directives and techniques described in this tutorial, or you can use a reactive (or model-driven) approach to build forms.