CODEWITHSUNDEEP
angularjs
user3362364
user3362364

Reputation: 477

Unable to get ng-repeat correctly

Chrome Network shows this when there's no certificate to show:

    user_certificates: []

I'm trying to show "Add Certificate" button when there's no certificate to show but it's not working. Where am I going wrong?

    <div ng-show="users.user_certificates == null">
        <div ng-click="newCertificate.editFlag = !newCertificate.editFlag" ng-init="newCertificate.editFlag=false">
            <span class="btn btn-default">Add Certificate</span>
        </div>
    </div>

FYI, this is my working code to show when there's certificate:

    <div ng-repeat="certificate in user.user_certificates">
        <div ng-hide="certificate.editFlag">
            <strong>{{certificate.title}}</strong><br />
            {{certificate.description}}
        </div>
    </div>

Upvotes: 0

Views: 54

Answers (3)

chovy
chovy

Reputation: 75686

I prefer a watcher

$scope.$watch('user_certificates', function(newVal){
    $scope.hasCerts = !!newVal.length;
});




<div ng-hide="hasCerts">
    <div ng-click="showAddCertForm()">
        <span class="btn btn-default">Add Certificate</span>
    </div>
</div>

Upvotes: 0

Jonny K
Jonny K

Reputation: 31

In JS, an empty array does not equate to null, e.g. if you try this in the console:

a = [];
a == null

You will get false returned.
Equally because of the way objects work in JS, a == [] will also be false. What you want is something along the lines of a.length == 0

Upvotes: 1

Vineet
Vineet

Reputation: 4645

Just try

<div ng-show="users.user_certificates.length === 0">

Comparing an array to null always return false. That's why your ng-show did not work. You can even try user_certificates.length[index] == null it will compare the value stored in given index, not compare whole array. You can either use typeof to check whether is an array defined or not. Like

if(typeof user_certificates.length === "undefined") {
  //Array is not defined
}

Upvotes: 2

Related Questions