Angularjs: How do you use ng-show? - angularjs

Question

I'm trying to check if something exists and show a button based on that. What am I doing wrong and how can I fix it?
My code looks like this:
$scope.isURL = function(url) {
$http.get(url).success(function (data) {
if (data === 302) {
return true
}
});
};
my HTML:
<ul ng-repeat="foo in foos">
<button ng-hide="isURL(foo.url)">visit site</button>
<button ng-show="isURL(foo.url)">remove bookmark?</button>
</ul>
Error loop I'm getting:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Answer 1

The biggest problem is that you are setting up a binding on a function that is returning a new promise each time.
The $digest cycle is going to fire, and evaluate the result of your function and determine that the result has changed, making it dirty. This will trigger another $digest loop that will continue ad infinitum.
A better option would be to check each of the urls, and set a property on the foo objects if they are good.
app.controller('displayCtrl', ['$scope','$http', function(scope,$http){
var foos = [
{name: 'foo-1', url:'assets/foo.html'},
{name: 'foo-2', url:'assets/bad.html'}
];
angular.forEach(foos, function(foo){
$http.get(foo.url).success(function (data) {
if(data === 302){
foo.isUrl = true;
}
});
});
scope.foos = foos;
}]);
Which you can then bind to in your markup like this:
<ul ng-repeat="foo in foos">
<button ng-hide="foo.isUrl">visit site</button>
<button ng-show="foo.isUrl">remove bookmark?</button>
</ul>

Answer 2

You may want to try something like this instead:
$scope.urls = {};
$scope.isURL = function(url) {
if (angular.isUndefined($scope.urls[url])) {
$scope.urls[url] = false;
$http.get(url).success(function(data) {
if (data === 302) {
$scope.urls[url] = true;
}
return data;
});
}
return $scope.urls[url];
};
That will also prevent you from checking each URL more than once. I am not sure why you are checking for data === 302, but I assume you know what you are doing there. If you are trying to check the status code, that will not work, you would need to use this instead:
$http.get(url).then(function(response) {
if (response.status === 302) {
$scope.urls[url] = true;
}
return response;
});
Edit
Documentation on how to use ngShow (and other directives) can be found on the AngularJS web site. The if the expression evaluated in the ngShow directives is truthy the element will be shown. In your code sample, $scope.isURL(...) does not return a value.