Search code examples
javascripthtmlangularjsangularjs-ng-clickangularjs-ng-model

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


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

Solution

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