AngularJS ng-disable functionality within ng-repeat

Question

I currently have two arrays of objects made in my javascript. The first array named list1 has keys named show and number, a boolean and integer. The second array named list2 has a key named number that takes on an integer.

I currently have a button that will add a number from list1 to list2, and I want to disable it the number already exists in list2.

Here is the HTML only showing repeat (my controller is renamed to list)

HTML

<li ng-repeat="item in list.list1>
   <a href="#" 
      class="btn btn-info btn-large" 
      ng-disabled=!"item.show" 
      ng-click="list.addItem(id, $index)">

      Add
   </a>
</li>

JS

this.addItem = function(id, index)
{
   this.list1[index].show = false;

   this.list2.push({number: id})
};

I'm not sure why my code isn't working and this isn't the first implementation I've tried. Would really appreciate some tips on how to do this correctly. Thanks!

Sorry about the bad initial code, sleepless night hasn't really helped me debug this.

Forgot to include $index in the function, updated code to reflect changes — user3821516
– user3821516, Commented Jul 29, 2014 at 18:04
I think what you have posted now should work except for the incorrect placement of ! in the ng-disable attribute — colestrode
– colestrode, Commented Jul 29, 2014 at 18:13
I recommend putting this up on plunkr or jsfiddle and posting a link. You will get much faster and better help that way. — Phil Sandler
– Phil Sandler, Commented Jul 29, 2014 at 18:17

colestrode · Accepted Answer · 2014-07-29 18:05:29Z

1

From your code for addItem, it looks like each entry in list1 has a property named show, rather than the array having a property named show. If that's the case, then your anchor should look something like this:

<a href="#" class="btn btn-info btn-large" ng-disabled="!pmt.show" ng-click="list.addItem(id, $index)">Add</a>

Also, the ! operator should be within the quotes on ng-disabled.

answered Jul 29, 2014 at 18:05

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

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

5 Comments

Phil Sandler Over a year ago

+1, although I think there may be other problems. E.g. what is list.pmt? Is addItem in a service, and is the repeat binding to the correct scope?

user3821516 Over a year ago

Oh yeah, I tried that before but I still couldn't get it working, that's definitely what I meant to write in my question

colestrode Over a year ago

I think your right @PhilSandler, looks like there are multiple issues here and the posted code doesn't give us enough to really troubleshoot this

user3821516 Over a year ago

Sorry updated code, had trouble sleeping last night and it's taking a toll on my ability to focus

colestrode Over a year ago

No problem @user3821516, we've all had those days :) And welcome to StackOverflow!

Collectives™ on Stack Overflow

AngularJS ng-disable functionality within ng-repeat

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related