I have this line in my view:
<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">
And then inside my controller I have:
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);
};
}])
But this is giving me "undefined".
How can I reference the value of the mySearch input field in my controller?
Your input field might be located within a sperate scope, which is not updated correctly. ngIf
and ng-repeat
are common examples for directives creating a separate sub-scope. (See this article for more information around scopes)
To protect yourself from such issues you might either store your variables inside objects.
<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);
};
Or name your controllers specifically as recommended in the angular style guide Y030.
A third option is simply passing the variable as parameter to the function:
<input placeholder="Search" type="text" ng-change="searchChange(mySearch)" ng-model="mySearch" ng-model-options="{debounce: 1000}">
$scope.searchChange = function(mySearch) {
console.log(mySearch);
};