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

Question

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

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”周围的花括号，您需要添加“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>

我在JSFIDLE为您准备了一个演示设置：http://jsfiddle.net/NjqnN/

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>

但是，最好将所有逻辑移动到控制器内部：

超文本标记语言：

<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，但如果没有，您还需要这样的ng模型：

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