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

Question

I have an input and I need to press 'Enter' to call the function to reload the listed items. For this I use

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

which works well when using a constant value in a call to loadItems, but as soon as I want to pass an 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>

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

Answer 1

You do not need {{ }}. I assume you already have mysearch defined, but if not, you will also need ng-model:

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

In addition, you should use a directive like ngEnter from this StackOverflow answer to clear the code: fooobar.com/questions/19686 / ...

:

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

Answer 2

, ( {{ }}) , Angular .

:

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

:

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

, , :

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

Answer 3

Your code does not need curly braces around "mysearch", and you need to add "mysearch" as an ng input model.

<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 have a demo for you here in jsfiddle: http://jsfiddle.net/NjqnN/

Answer 4

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