Angularjs：如何将输入值传递给函数？

Question

我有一个输入，我需要按“Enter”来调用函数来重新加载列出的项目。 为此，我正在使用

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

当在loadItems调用中使用常量值时，它运行得很好，但是只要我想传递输入值，我就会收到一个错误：

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

这就是我得到的

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

您不需要{{ }} 。 我假设您已经定义了mysearch，但如果没有，您还需要这样的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>

此外，您应该使用此StackOverflow答案中的ngEnter等指令来使代码更清晰： https ：//stackoverflow.com/a/17364716/3450859

然后它会是：

<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

您的代码不需要“mysearch”周围的大括号，您需要添加“mysearch”作为输入的ng模型。

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

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