Angularjs: Wie übergeben Sie einen input-Wert an eine Funktion?

Habe ich ein Eingang und ich brauche, wenn durch drücken der Taste 'Enter' aufrufen, eine Funktion zum erneuten laden der aufgeführten Elemente. Dafür bin ich mit 

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

funktioniert ruhigen gut, wenn mit einem Konstanten Wert auf die loadItems aufrufen, aber sobald ich übergeben möchte den input-Wert bekomme ich eine Fehlermeldung:

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

Dass ist es, was ich

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

InformationsquelleAutor jmhostalet | 2014-03-23

  1. 14

    Brauchen Sie nicht die {{ }}. Ich nehme an, Sie haben bereits mysearch definiert, aber wenn nicht, müssen Sie auch ng-Modell wie folgt:

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

    Außerdem sollten Sie verwenden eine Richtlinie, wie ngEnter von dieser StackOverflow Antwort, um den code sauberer: https://stackoverflow.com/a/17364716/3450859

    Dann wäre es:

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

    InformationsquelleAutor Prerender.io

  2. 4

    Dieser Fehler wird verursacht, weil Sie die Interpolation (mit {{ }}), in einem Kontext, der Winkel schon kennt.

    Ändern:

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

    Jedoch ist es wahrscheinlich besser, zu verschieben alle, dass die Logik innerhalb des Controllers:

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

    InformationsquelleAutor Davin Tryon

  3. 2

    Ihren code nicht brauchen, die geschweiften Klammern um "mysearch" und Sie brauchen, um hinzuzufügen, "mysearch" als ng-Modell des 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>

    Habe ich eine demo-setup für Sie hier bei jsfiddle:
    http://jsfiddle.net/NjqnN/

    InformationsquelleAutor ReedD

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

    InformationsquelleAutor sudheer nunna

Schreibe einen Kommentar