Bind input value to ng-click button (send value as parameter)

Question

I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?:

<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>


$scope.getById = function (id) {
        console.log(id);
        return $http.get('/api/Post/' + id);
    }

what problem you are getting now after changing code to @JDTLH9 suggestion? — Pankaj Parkar
– Pankaj Parkar, Commented Jul 5, 2015 at 19:23
Well the problem is that the title of the post isn't appearing at all in the h1 tag — btmach
– btmach, Commented Jul 6, 2015 at 11:40

JDTLH9 · Accepted Answer · 2015-07-05 19:11:41Z

22

You should use ng-model directive for your input element.

Markup

 <input type="text" name="name" ng-model="post.PostId" />
 <button ng-click="getById(post.PostId)"></button>
 <h1>{{post.Title}}</h1>

This will take care of 2-way model binding to your property post.PostId. Your ng-click directive will pick up the correct value entered in input element.

See my working Plunk :)

edited Jul 5, 2015 at 19:11

answered Jul 5, 2015 at 19:01

JDTLH9

1,7751 gold badge23 silver badges34 bronze badges

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

2 Comments

btmach Over a year ago

Well it doesn't seem to work, but I added more code to the original post so that you can see the getById :)

JDTLH9 Over a year ago

@btmach it should work as you wanted. Please see the link to the Plunk in my edited answer.

Collectives™ on Stack Overflow

Bind input value to ng-click button (send value as parameter)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related