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

Question

I am trying to associate a value from an input field with a parameter of my method on ng-click. Here is what I got, but it will not work, and I'm not sure if it can be done like this:

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

Answer 1

You must use the 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 bind the two-way model to your post.PostId property. Your ng-click directive will select the correct value entered in the input element.

See my working plunk :)