Pass Button value into a function using angular

Question

I have one simple nav-bar ,In which when I click on tab I need to pass value of tab into a method.
I tried this but am getting undefined.

<body ng-app="myApp" ng-controller="myCtrl">
<div>
<ul><li ng-click="displayValue(home)"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">Home</span></a></li></ul>
</div>
</body>

<script>
var app=angular
            .module('myApp', [])
            .controller('myCtrl', function ($scope) {
                $scope.displayValue= function (val) {
                    alert(val)
                }
            })
 </script>

Here I need to pass home into a method.

show us your controller

Sajeetharan
– Sajeetharan

2017-06-16 05:20:12 +00:00
Commented Jun 16, 2017 at 5:20 — Sajeetharan
– Sajeetharan, Commented Jun 16, 2017 at 5:20

biswajit-rout · Accepted Answer · 2017-06-16 05:29:29Z

2

You cant pass the text as argument from the view. If you have define ng-model, then you can directly access it in the controller. Here is the updated code. I think it will clear all your doubt.

var app=angular.module('myApp', [])
    app.controller('myCtrl', function ($scope) {
        $scope.home = "Home";
        $scope.displayValue = function (val) {
            alert($scope.home);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ng-click="displayValue(home)"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li></ul>
</div>

answered Jun 16, 2017 at 5:29

biswajit-rout

3772 silver badges11 bronze badges

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

3 Comments

krish Over a year ago

ok If I have multiple tab means?then what would be the solution?

AKMorris Over a year ago

Are the multiple tabs being produced with ng-repeat?

biswajit-rout Over a year ago

@krish Here is the updated fiddle Which will clear your doubt regarding multiple tabs. jsfiddle.net/biswajit_rout/f1o0jj58/6

user7397787 · Accepted Answer · 2017-06-16 05:33:37Z

1

Just Pass your data as string ng-click="displayValue('home').
For multiple tabs also you can pass like this.

answered Jun 16, 2017 at 5:33

user7397787

1,4888 gold badges29 silver badges43 bronze badges

1 Comment

krish Over a year ago

Thanks ..I got it

AKMorris · Accepted Answer · 2017-06-16 05:30:56Z

1

Ok first you need to reference Home as a scope variable using double curly brackets "{{home}}". Then you need to define this scope variable in your controller. Here is the code: https://jsfiddle.net/AKMorris/ogpcvze7/

HTML

<div data-ng-app='myApp' data-ng-controller='myCtrl'>
<li ng-click="displayValue()"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li>
</div>

Javascript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
        $scope.home = "Home";
        $scope.displayValue = function (home)
    {
        console.log($scope.home);
    }
});

answered Jun 16, 2017 at 5:30

AKMorris

4224 silver badges16 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-06-16 05:32:35Z

1

You should use your function name properly, it should be goSearch instead of displayValue

<li ng-click="goSearch(home)">

EDIT

If you want to pass the ng-model variable to a function, you need to have the value initialized.

 $scope.home = "Home";
 $scope.goSearch = function (val) {
            alert($scope.home);
 }

DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.home = "Home";
     $scope.goSearch = function (home)
    {
        console.log($scope.home);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app='myApp' data-ng-controller='myCtrl'>
<li ng-click="goSearch()"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li>
</div>

edited Jun 16, 2017 at 5:32

answered Jun 16, 2017 at 5:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Alon Eitan Over a year ago

ng-model="home" on a element? I can't see how this will alert anything other than undefined

Collectives™ on Stack Overflow

Pass Button value into a function using angular

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related