CODEWITHSUNDEEP
javascriptangularjs
Clay Banks
Clay Banks

Reputation: 4591

Pass innerText to Angularjs Controller

I am trying to get the inner text of a <p> element in my Angular application and pass it to a method and a view using ng-route. So when a user clicks on the <p> element, the innerText is passed through a method, gets some data back, then returns a new view with the response data returned

<p ng-click="searchUser()">Bob Ross</p>

js

var app = angular.module('app', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider){
  .when('/searchUser:name', { 
        templateUrl: 'user-results.html',
        controller:  'searchController'
    })

app.controller('searchController', function($scope, $routeParams) {
    $scope.name = $routeParams.name;
    $scope.searchUser = function(){
        // do some stuff;
    }
});

I'm not sure how to grab the inner text of the <p> tag properly and pass it through the method (I'm likely way off); should I be binding it to my model and then passing as a routeparam?

Any help is appreciated!

Upvotes: 0

Views: 784

Answers (2)

10100111001
10100111001

Reputation: 1832

You can pass in the $event argument to the searchUser function. You can then use the $event.currentTarget to grab the element. For more details on the $event object, click here.

<p ng-click="searchUser($event)">Bob Ross</p>

$scope.searchUser = function($event){
    var username = $event.currentTarget.innerHTML;
}

Upvotes: 2

DerekMT12
DerekMT12

Reputation: 1349

I'm assuming you're using $http to get the list of users in your controller, in which case you could do this:

<p ng-repeat="user in users" ng-click="searchUser(user.name)">{{user.name}}</p>

And in your controller:

$scope.searchUser = function(userName){
   // do some stuff with userName;
};

Upvotes: 2

Related Questions