Disable button when object is empty

Question

When matchList = [] is empty the button ng-disabled="checkIfDataExists" should be disabled. But when matchList = [] is full the button should be enabled. How to archive that? Thanks

Controller:

app.controller('gameplanController', ['currentAuth', '$scope', '$location', '$firebaseObject', '$firebaseArray', '$http', function (currentAuth, $scope, $location, $firebaseObject, $firebaseArray, $http) {

    var ref = firebase.database().ref("matches");
    var matchList = $firebaseObject(ref);

    matchList.$loaded().then(function (data) {

        $scope.checkIfDataExists = function () {
            var matchList = [];

            if(matchList.length === 0) {
                console.log("empty");
                $scope.checkIfDataExists = true
            } else {
                console.log("full");
                $scope.checkIfDataExists = false
            }

        };

    });

}]);

HTML:

<button type="button" class="btn btn-default button-main" ng-disabled="checkIfDataExists">{{ gametable }}</button>

Remove var matchList = []; from your function

Vivz
– Vivz

2017-08-24 09:22:45 +00:00
Commented Aug 24, 2017 at 9:22 — Vivz
– Vivz, Commented Aug 24, 2017 at 9:22
Where is your button present?

Vivz
– Vivz

2017-08-24 09:24:48 +00:00
Commented Aug 24, 2017 at 9:24 — Vivz
– Vivz, Commented Aug 24, 2017 at 9:24
Is your button wrapped inside a ng-if or ng-repeat?

Vivz
– Vivz

2017-08-24 09:29:37 +00:00
Commented Aug 24, 2017 at 9:29 — Vivz
– Vivz, Commented Aug 24, 2017 at 9:29
Try to create a punker with the above problem

Vivz
– Vivz

2017-08-24 09:32:10 +00:00
Commented Aug 24, 2017 at 9:32 — Vivz
– Vivz, Commented Aug 24, 2017 at 9:32
where did you called the checkIfDataExists function

nature vetri
– nature vetri

2017-08-24 09:59:21 +00:00
Commented Aug 24, 2017 at 9:59 — nature vetri
– nature vetri, Commented Aug 24, 2017 at 9:59

YakovL · Accepted Answer · 2017-08-25 03:58:42Z

1

app.controller('gameplanController', ['currentAuth', '$scope', '$location', '$firebaseObject', '$firebaseArray', '$http', function (currentAuth, $scope, $location, $firebaseObject, $firebaseArray, $http) {

    var ref = firebase.database().ref("matches");
    var matchList = $firebaseObject(ref);

    matchList.$loaded().then(function (data) {      

        var matchList = [];
        if(matchList.length === 0) {
            console.log("empty");
            $scope.checkIfDataExists = true
        } else {
            console.log("full");
            $scope.checkIfDataExists = false
        }
    });

}]);

Just try my changes.

edited Aug 25, 2017 at 3:58

YakovL

8,44813 gold badges74 silver badges117 bronze badges

answered Aug 24, 2017 at 10:01

nature vetri

3042 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nature vetri Over a year ago

try my changes now

Azad · Accepted Answer · 2017-08-24 08:42:06Z

0

modify your controller simple as follow

app.controller('gameplanController', ['currentAuth', '$scope', '$location', '$firebaseObject', '$firebaseArray', '$http', function (currentAuth, $scope, $location, $firebaseObject, $firebaseArray, $http) {

            var ref = firebase.database().ref("matches");
            var matchList = $firebaseObject(ref);
            $scope.checkIfDataExists = false
            matchList.$loaded().then(function (data) {

                    $scope.checkIfDataExists = (matchList.length !== 0); //checkIfDataExists true when matchlist array has data
            });

        }]);

answered Aug 24, 2017 at 8:42

Azad

5,2725 gold badges32 silver badges59 bronze badges

1 Comment

Azad Over a year ago

its disabled when matchlist is full (or matchlist has data)

Marcus Höglund · Accepted Answer · 2017-08-24 08:49:40Z

0

Another option would be to attach the matchList to the $scope and check the length directly in the NgDisable like

<button type="button" 
        class="btn btn-default button-main" 
        ng-disabled="!matchList.length > 0">
  {{ gametable }}
</button>

answered Aug 24, 2017 at 8:49

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

2 Comments

Marcus Höglund Over a year ago

@jglom did you attach the matchList to the $scope?

Marcus Höglund Over a year ago

@jglom Ok, great!

Archael Anie · Accepted Answer · 2017-08-24 10:37:51Z

0

Try this instead.

$scope.checkIfDataExists = function () {

        if(matchList.length === 0) {
            console.log("empty");
            return true;
        } else {
            console.log("full");
            return false;
        }

    };

edited Aug 24, 2017 at 10:37

answered Aug 24, 2017 at 9:23

Archael Anie

2412 silver badges12 bronze badges

1 Comment

Archael Anie Over a year ago

well I think its because you declare the " matchList = []" inside the function. try to remove that.

Collectives™ on Stack Overflow

Disable button when object is empty

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related