AngularJs behavior button

Question

I have a button:

 <button  data-ng-click="toggleElement(asset)"   class="btn"><span class="text-center">Add To Cart</span></button>

I would like to hide this button when this element will add in a list and show
a disable button with the title "Added to Cart"!!

I tried it :

<table class="table" data-ng-show="elements!=null && elements.length>0">
  <tr  data-ng-repeat="element in elements">          
            <td> 
            <button  data-ng-click="toggleElements(element)"  ng-disabled="isDisabled" ng-model="isDisabled"  class="btn"><span class="text-center">Add To Cart</span></button>
    <td> <button data-ng-click="toggleAsset(elements[$index])" data-ng-disabled="added" class="btn">{{added ? 'Added' : 'Add'}}</button>             
</td> 
 </tr>

    </table>

in my controller I have this :

$scope.toggleElements= function (element){
        .....
           $scope.added  = true;
}

Somebody can help me...

What have you tried? Angular documentation should be more than enough to answer this question with the added bonus of learning the framework. — Simon Belanger
– Simon Belanger, Commented Jan 8, 2014 at 17:55

William Lepinski · Accepted Answer · 2014-01-08 17:55:27Z

2

I think this will work for you:

<button ng-click="toggleElement(asset)" ng-disabled="asset.added">{{asset.added ? 'Added' : 'Add'}}</button>

You'll need to set the property asset.added inside the toggleElement() method.

answered Jan 8, 2014 at 17:55

William Lepinski

9171 gold badge7 silver badges14 bronze badges

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

2 Comments

user880386 Over a year ago

I have asset.added undefined...How can I add it!!! It is possible that I have to put ng-model="assets[$index].added" ??

William Lepinski Over a year ago

Remember that if you are inside a ng-repeat you don't need to use the $index variable. You can just grab the current item being iterated and use it.

luacassus · Accepted Answer · 2014-01-08 17:59:27Z

0

You can execute several instructions inside one ng-click directive. Just separate them with ; like a normal javascript expression.

For example:

<button ng-click="doIt(); hide = true" ng-hide="hide">
  click me!
</button>

answered Jan 8, 2014 at 17:59

luacassus

6,7502 gold badges44 silver badges59 bronze badges

6 Comments

William Lepinski Over a year ago

The problem with this approach is that the hide variable is assigned to the current scope. If you are outside a ng-repeat or other directive, which create isolated scopes, you can leak this variable to other elements. This is also complicate unit testing, you are putting part of the logic on the view...

mnemosyn Over a year ago

This will define a variable $scope.hide which will be shared by all assets, so if it's used in a list, it will hide all buttons, not just one. While not clear from the OP's question, I think it's safe to assume that there's a a list of assets

gab Over a year ago

@mnemosyn disagree with you. It won't hide all buttons. Check my plunkr.

mnemosyn Over a year ago

@gab: true, but that's because ng-repeat creates an isolated scope. If you simply copy the button, they'll interact. William Lepinski's comment already points that out.

mnemosyn Over a year ago

@user880386: use William Lepinski's approach where the hidden property is stored on the object rather than the scope.

|

gab · Accepted Answer · 2014-01-08 18:16:37Z

0

here is one solution.

Have a look to the plunk

<button ng-repeat="a in [0,1,2]" data-ng-click="added = !added" class="btn" ng-disabled="added">
  <span ng-show="!added" class="text-center">Add To Cart</span>
  <span ng-show="added" class="text-center">Added To Cart</span>
</button>

edited Jan 8, 2014 at 18:16

answered Jan 8, 2014 at 17:57

gab

4,0633 gold badges19 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJs behavior button

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related