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...

Answer 1

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.

Answer 2

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>

Answer 3

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>