CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Rajeev
Rajeev

Reputation: 1113

Disable button according to value in array, angularjs

I have a list of array from A-Z and create a button list from them 

$scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

I have another array 

$scope.uniqChar = ['a', 'g', 'm'];

by using this array I want to create a button list where all the button disable except the button those name are 'a', 'g', 'm'(which are in $scope.uniqChar). I did this jsfiddle, but the output shown in three times. I want it only in one list. Please enlighten me.

Upvotes: 0

Views: 909

Answers (2)

Vinay K
Vinay K

Reputation: 5572

Please take a look at the updated fiddle. http://jsfiddle.net/U3pVM/13663/

No need to use two ng-repeat directives. Because of which buttons were rendered multiple times.

Here is the updated markup which will solve the problem:

<div ng-app>
    <div ng-controller="TodoCtrl">
        <button ng-repeat="letter in alphabet" ng-disabled="uniqChar.indexOf(letter) === -1">
            {{letter | uppercase}}
        </button
    </div>
</div>

Upvotes: 6

gkr
gkr

Reputation: 469

Angular is doing exactly what you ask him to do. For each letter in the uniqChar array, it print the whole alphabet enabling only the button with the letter your looping on.

What you want is to loop on the alphabet and enable each button only if they are a the letter present in the uniqChar.
<button ng-repeat="letter in alphabet" ng-disabled="uniqChar.indexOf(letter) < 0">

Upvotes: 0

Related Questions