Adam91Holt Adam91Holt - 3 months ago 9
AngularJS Question

Making a request to API on keyup but I cant access something in the scope

Ive been trying for the past couple of hours but for I can't seem to figure out why I can access $scope.FeatureGroup to add to my url

Any ideas?



angular.module('ngRepeat', ['ngAnimate',]).controller('repeatController', function($scope, $http) {
$scope;
$scope.FeatureGroup = 50000;
$scope.ShowMeData = function($scope){
var url = 'URLHERE' + $scope.FeatureGroup;
$http.get(url).success(function(data) {
console.log(data);
//$scope.Object = data;
});
}
});

<html lang="en"><head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
There are Features - Please click them to see the page:
<br><input type="number" ng-model="FeatureGroup" ng-value="10" ng-keyup="ShowMeData()">
<br><input type="search" ng-model="q" placeholder="filter Features..." aria-label="filter friends">
<ul class="example-animate-container">
{{FeatureGroup}}
<!-- ngIf: Objects.length === 0 -->
<!-- ngRepeat: feature in Object | filter:q as results -->
</ul>
</div>
</body>
</html>




Answer

That is because of following line. You are overriding the $scope variable:

 $scope.ShowMeData = function($scope){

You are really not passing any scope variable while calling the function

ng-keyup="ShowMeData()".

Just change it to:

$scope.ShowMeData = function(){

and it should work.