angularjs - 在我的 angularjs Controller 中获取 ng-change 字段的值

Question

我的观点是这条线:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

然后在我的 Controller 中我有:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

    $http.get('http://www.domain.co.uk/api/search.php').
        then(function(response) {
            $scope.food = response.data;
        });

    $scope.searchChange = function() {
        console.log($scope.mySearch);   
    };         

}])

但这给了我“未定义”。

如何在我的 Controller 中引用 mySearch 输入字段的值？

Answer 1

您的输入字段可能位于未正确更新的单独范围内。 ngIf 和 ng-repeat 是创建单独子范围的指令的常见示例。 (有关范围的更多信息，请参阅 this article)

点范围变量

为了保护自己免受此类问题的影响，您可以将变量存储在对象中。

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="my.search" ng-model-options="{debounce: 1000}">


$scope.my = {search: ""};
$scope.searchChange = function() {  
    console.log($scope.my.search);
}; 

命名 Controller

或者按照 Angular 样式指南中的建议专门命名您的 Controller Y030 .

将变量作为参数传递

第三种选择是简单地将变量作为参数传递给函数:

<input placeholder="Search" type="text" ng-change="searchChange(mySearch)" ng-model="mySearch" ng-model-options="{debounce: 1000}">



$scope.searchChange = function(mySearch) {  
    console.log(mySearch);
};