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">

Community · Accepted Answer · 2017-05-23 11:55:09Z

16

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>

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Mar 23, 2014 at 0:33

Prerender.io

1,60410 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davin Tryon · Accepted Answer · 2014-03-23 00:34:05Z

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

ReedD · Accepted Answer · 2014-03-23 00:34:31Z

2

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/

answered Mar 23, 2014 at 0:34

ReedD

9977 silver badges6 bronze badges

Comments

Sender · Accepted Answer · 2015-10-31 12:50:52Z

0

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

edited Oct 31, 2015 at 12:50

Sender

6,90812 gold badges49 silver badges69 bronze badges

answered Oct 31, 2015 at 12:44

sudheer nunna

1,72915 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related