I'm new to Angular and I want to hide some specific HTMl in case of an Object is empty, but how can I achieve that?
so far I have:
$scope.links = data.links;
and then:
<div ng-if="links">
/// some more html
</div>
but that doesnt work. Any help is appreciated...
Controller:
$scope.linksLength = Object.keys(data.links).length > 0;
HTML:
<div ng-show="linksLength">
/// some more html
</div>
In cases like this I would write a simple function to use:
$scope.showLinks = function () {
return $scope.links !== undefined && $scope.links !== null && $scope.links.length > 0;
}
then
<div ng-if="showLinks()">
/// some more html
</div>
links is indeed an array, ng-if="links.length" would be fine as the view code chomps exceptions if the expression is undefined.Just add .length to ng-if="links" then change ng-if to ng-show.
E.g.
<div ng-show="links.length">
/// some more html
</div>
If ng-show detects that the value of links.length is 0 then it's false if not equal to 0 then it's true.
0 = false
> 0 = true
Hope it helps.
use ngHide or ngShow.
<div ng-show="links.length">
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<p ng-hide="isempty(products)">element</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.products=[];
$scope.isempty=function(obj)
{
return (angular.equals([], obj));
}
});
</script>
</body>
data.links?console.log($scope.links)returnsObject {}