Angularjs: How to pass a input value to a function?

Question

I have an input and I need when pressing 'Enter' to call a function to reload the listed items. For that I am using

ng-keyup="$event.keyCode == 13 ? loadItems('a constant') : null"

that works quiet well when using a constant value at the loadItems call, but as soon as I want to pass the input value I get an error:

<input id="input-search" name="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems({{mysearch}}) : null" placeholder="Search">
  <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

That is what I get

http://errors.angularjs.org/1.2.14/$parse/syntax?p0=mysearch&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=36&p3=%24event.keyCode%20%3D%3D%2013%20%3F%20loadItems(%7B%7Bmysearch%7D%7D)%20%3A%20null&p4=mysearch%7D%7D)%20%3A%20null
at Error (native)
at http://localhost:8080/vendor/angular-1.2.14/angular.min.js:6:450
at Ya.throwError (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:158:422)
at Ya.consume (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:159:394)
at Ya.object (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:167:45)
at Ya.primary (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:158:57)
at Ya.unary (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:164:273)
at Ya.multiplicative (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:164:6)
at Ya.additive (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:163:376)
at Ya.relational (http://localhost:8080/vendor/angular-1.2.14/angular.min.js:163:240) <input id="input-search" name="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems({{mysearch}}) : null" placeholder="Search">

score 16 · Accepted Answer · edited May 23 '17 at 11:55

You don't need the {{ }}. I assume you already have mysearch defined, but if not, you also need ng-model like this:

<input id="input-search" name="mysearch" ng-model="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems(mysearch) : null" placeholder="Search">
    <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

Also, you should use a directive like ngEnter from this StackOverflow answer to make the code cleaner: https://stackoverflow.com/a/17364716/3450859

Then it would be:

<input id="input-search" name="mysearch" ng-model="mysearch" ng-enter="loadItems(mysearch)" placeholder="Search">
    <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

score 4 · Answer 2 · answered Mar 23 '14 at 00:34

This error is causes because you are interpolating (using {{ }}) inside of a context that Angular already knows about.

Change this:

<input id="input-search" name="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems({{mysearch}}) : null" placeholder="Search">
  <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

To this:

<input id="input-search" name="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems(mysearch) : null" placeholder="Search">
  <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

However, it is probably better to move all of that logic inside of your controller:

HTML:

<input id="input-search" name="mysearch" ng-keyup="enter($event)" placeholder="Search">
  <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

JS:

$scope.enter = function(e) {

    if (e.keyCode == 13) {
        loadItems($scope.mysearch);
    }
}

score 2 · Answer 3 · answered Mar 23 '14 at 00:34

Your code doesn't need the curly brackets around "mysearch" and you need to add "mysearch" as an ng-model of the input.

<div ng-app>
    <div ng-controller="AppCtrl">
        <input id="input-search" ng-model="mysearch" name="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems(mysearch) : null" placeholder="Search" />
    </div>
</div>

I've got a demo setup for you here at jsfiddle: http://jsfiddle.net/NjqnN/

score 0 · Answer 4 · edited Oct 31 '15 at 12:50

wellService.factory('Services', function($http, $q) {
    return {
        services: function(cityId) {
            var def = $q.defer();
            $http({
                    method: 'POST',
                    url: 'services',
                    data: $.param(cityId),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .success(function(data, status, headers, config) {
                    def.resolve(data);
                }).error(function(data, status, headers, config) {
                    def.reject(data);
                })
            return def.promise;
        }
    }
});

Angularjs: How to pass a input value to a function?

4 Answers4