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);
    }

Permeable

what problem you are getting now after changing code to @JDTLH9 suggestion? – Apologete

Well the problem is that the title of the post isn't appearing at all in the h1 tag – Permeable

Answer 1

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

Dowlen

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

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