CODEWITHSUNDEEP
javascriptjqueryangularjs
Rahul Sharma
Rahul Sharma

Reputation: 436

Angular: Disable button if value exist in object array with ng-repeat

I have list of groups and generate that group list in HTML with ng-repeat(list of buttons) and its working perfectly. But in case when i am trying to disable some buttons with ng-disabled by call function to check the value, i just amazed my loop and buttons showing correctly but ng-disable="myfunc()" called many times.

My Code:

<button class="button button-block button-calm btn-shape" ng-click="startSurvey(group.survey_id,group.id)"  ng-repeat="group in groupList" ng-disabled="checkGroupCompleted($index)">
    {{group.title}}
</button>

Group List:

enter image description here

Controller:

$scope.checkGroupCompleted = function(groupID){
        console.log(groupID);

    }

Console Output:

enter image description here

I just need similar functionality: JSFiddle

Upvotes: 1

Views: 1836

Answers (3)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

This is what angular is all about. Whenever your $scope will get modified each time digest cycle will run so each and every function is going to be called.

In case of ng-show, ng-show, ng-disabled etc same process it follows.

Upvotes: 1

Gohel Dhaval
Gohel Dhaval

Reputation: 830

You are use ng-repeat in button it self so when loop start function it self fire many time so you can put ng-repeat to its parent element and then after put button inside after that you add ng-disabled to button and check it.

For ex.


<div> ng-repeat=groups in group>
    <button> ng-disabled="checkGroupCompleted($index)"></button>
</div>

    $scope.checkGroupCompleted = function(groupID){
         return (groupID === 1);
    }

Upvotes: 0

Vamidi
Vamidi

Reputation: 41

$scope.checkGroupCompleted = function(groupID) {
    return (groupID === 1);
}

if the value is 1 it will return true or else false

Upvotes: 0

Related Questions