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

javascript html angularjs angularjs-ng-click angularjs-ng-model

btmach · Jul 5, 2015 · Viewed 43.7k times · Source

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

Answer

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

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

Answer

Related questions