AngularJS ng-show Not Working with ng-click?

Question

i don't understand what my ng-show not working when i click on my button with ng-click... thanks for help.

<div ng-show="showMe == 1">
     <h5>Ajouter</h5>
     <input type="texte">
</div>
<table>
    <thead>
        <tr>
            <th>Numéro :</th>
            <th>Type de Produit :</th>
        </tr>
    </thead>
    <tbody ng-repeat="product in shopCtrl.tableProduct">
        <tr>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td class="text-right">
                <div>
                    <button ng-click="showMe = 1">Ajouter</button>
                </div>
            </td>
    </tbody>
</table>

Walfrat · Accepted Answer · 2016-03-11 10:54:54Z

1

The answer of gtlambert is true. However if you have more than one level of ng-repeat or another directive that does the same thing you'll have trouble.

To not have any trouble use objects like this :

$scope.params = {showMe:0};// init in controller

<div ng-show="params.showMe == 1">
<button ng-click="params.showMe = 1">

This will always works whatever the number of ng-repeat/directive you use.

answered Mar 11, 2016 at 10:54

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

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

Comments

gtlambert · Accepted Answer · 2016-03-11 10:51:22Z

0

When you use ng-repeat this creates a new scope. To access the main controller scope from inside the ng-repeat you need to use $parent.

So, change your ng-click to $parent.showMe = 1 and this will fix the problem:

<button ng-click="$parent.showMe = 1">Ajouter</button>

answered Mar 11, 2016 at 10:51

gtlambert

12k2 gold badges32 silver badges48 bronze badges

Comments

Martin · Accepted Answer · 2016-03-11 11:21:11Z

Here you go. I have a working example. showMe becomes a member of your controller.

function ShopController() {
  this.showMe = false;
  this.tableProduct = [{
    id: 1,
    name: "Bar"
  }];
}

angular.module('app', [])
  .controller('ShopController', ShopController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ShopController as shopCtrl">
  <div ng-show="shopCtrl.showMe">
    <h5>Ajouter</h5>
    <input type="texte">
  </div>
  <table>
    <thead>
      <tr>
        <th>Numéro :</th>
        <th>Type de Produit :</th>
      </tr>
    </thead>
    <tbody ng-repeat="product in shopCtrl.tableProduct">
      <tr>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td class="text-right">
          <div>
            <button ng-click="shopCtrl.showMe = true">Ajouter</button>
          </div>
        </td>
    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

AngularJS ng-show Not Working with ng-click?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related