Angularjs getting the button value

Question

I need to get the button id value using angularjs.I have written the code but i am getting the value as "undefined".So please suggest me the code which i need to use.

My code is:

 <button type="button"  class="btn btn-primary ole" data-toggle="tooltip"  id="buttonvalue" name="rdoResult"  value="SUN" ng-click="addvalue()"  ng-model="testDate23"  data-placement="left" data-original-title="this is a left tooltip">
      SUN
</button>

<button type="button"  ng-value="2"  class="btn btn-primary ole two" data-toggle="tooltip"  ng-click="addvalue()" 
 ng-model="testDate23" value="MON"  id="buttonvalue" data-placement="top" data-original-title="this is a top tooltip">
      MON
</button>

Script code:

$scope.addvalue = function() {
    var datevaluee=$scope.testDate23;
}

whatever the value of testDate23 will be before binding , it will be same in the method. What you want in $scope.testDate23 ? — Viplock
– Viplock, Commented Feb 10, 2016 at 4:07

Nimesh.Nim · Accepted Answer · 2016-02-10 05:10:51Z

2

You need to pass the $event in ng-click function like below..

   ng-click="addvalue($event)"

below will be the function implementation

    $scope.addvalue = function(element) {
      $scope.testDate23 = element.currentTarget.value; // this will return the value of the button
    console.log( $scope.testDate23)
   };

answered Feb 10, 2016 at 5:10

Nimesh.Nim

3882 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viplock · Accepted Answer · 2016-02-10 04:37:34Z

1

you can try this.

    <button ng-click="addvalue(testDate23='SUN')">
     button
    </button>

or

   <button ng-click="addvalue(testDate23='MON')">
    btn2
   </button>

Find fiddle Fiddle example

Hope it will help.

edited Feb 10, 2016 at 4:37

answered Feb 10, 2016 at 4:30

Viplock

3,3191 gold badge26 silver badges34 bronze badges

1 Comment

Viplock Over a year ago

you can use it with multiple buttons, with ng-repeat also.

Kobi Cohen · Accepted Answer · 2016-02-10 03:54:48Z

0

Button is an input for submitting data, not setting data.

answered Feb 10, 2016 at 3:54

Kobi Cohen

6784 silver badges9 bronze badges

6 Comments

Pandu Koturu Over a year ago

yes but when i click on that button i need to get the value

Kobi Cohen Over a year ago

The only way i familiar with is via directive, scope.value = attrs.value

Pandu Koturu Over a year ago

it is not working is there any to get the button value in angular

Kobi Cohen Over a year ago

if you want the "value" remove the ng-value and vice versa. here is a plunkr that works plnkr.co/edit/0ZJsHVXULAV9JOnLRCH6?p=preview

Pandu Koturu Over a year ago

I have seen the code but while loading the page the values is coming not when click on button please see that code

|

Stepan Kasyanenko · Accepted Answer · 2016-02-10 04:30:05Z

You need use directive.

Live example on jsfiddle.

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
    $scope.getValue = function() {
      $scope.value = $scope.testDate23;
    }
  });
  
myApp.directive('buttonValue', function() {
    return {
      restrict: 'A',
      scope: {
       buttonValue:"="
      },
      link: function(scope, element, attr) {
        scope.$watch(function(){return attr.ngValue},function(newVal){
           scope.buttonValue = newVal;
        });
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="btnValue">
  <button ng-value="{{btnValue}}" ng-click="getValue()" button-value="testDate23">
    MON
  </button>
  <br>
  <pre>testDate23= {{testDate23}}</pre>
  <pre>value= {{value}}</pre>
</body>

ojus kulkarni · Accepted Answer · 2016-02-10 04:44:56Z

0

If you want to set hardcoded value then use ng-init

<button type="button"  ng-init="value=2"  class="btn btn-primary ole two" data-toggle="tooltip"  ng-click="addvalue()" 
ng-model="testDate23" value="MON"  id="buttonvalue" data-placement="top" data-original-title="this is a top tooltip">
  MON
</button>

You can use value aywhere in your same template.

answered Feb 10, 2016 at 4:44

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angularjs getting the button value

5 Answers 5

Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related