CODEWITHSUNDEEP
angularjsng-show
segolas.zoso
segolas.zoso

Reputation: 397

angularjs ng-show can't hide

I'm kinda new to angular so this may be a dumb question but I have this snippet of code:

              <tr ng-repeat="ingr in recipe.ingredients">
                <div ng-show="ingr.edit">
                    <td>{{ ingr.amount }}</td>
                    <!--td>{{ ingr.units }}</td> -->
                    <td>{{ingr.edit}}</td> //here I see ingr.edit toggle
                    <td>{{ ingr.description }}</td>
                </div>
                <td>
                    <button type="button" class="btn btn-default" ng-click="ingr.edit = !ingr.edit">
                        <span class="glyphicon glyphicon glyphicon-edit"></span>
                    </button> 
                </td>

              </tr>

but I can't hide the div. I can see in one of the table cells that ingr.edit toggles correctly, but still the div is always visible.

Can someone help? thanks

Upvotes: 0

Views: 422

Answers (3)

Walfrat
Walfrat

Reputation: 5353

What about something like this ? 

angular.module("app", []).controller("ctrl", function($scope){
    $scope.recipe = {ingredients:[{
     amount:10,edit:true,description:"foo"},//edit:true or it won't ever show in my sample
    {amount:50,edit:true,description:"bar"}]};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app"  ng-controller="ctrl">
 <tr ng-repeat="ingr in recipe.ingredients" ng-show="ingr.edit">

     <td>{{ ingr.amount }}</td>
     <!--td>{{ ingr.units }}</td> -->
     <td>{{ingr.edit}}</td> //here I see ingr.edit toggle
     <td>{{ ingr.description }}</td>

   <td>
     <button type="button" ng-click="ingr.edit = !ingr.edit">
       CLICK
     </button> 
   </td>

</tr>

I moved the ng-show in the <tr> because <div> tag is invalid there so it will have been totally ignored.

EDIT : see@sag Answer to see how to replace the div tag by a table so it will get executed.

Upvotes: 1

sag Surya
sag Surya

Reputation: 199

  <tr ng-repeat="ingr in recipe.ingredients">
           <td>
             <table ng-show="ingr.edit">
                <td>{{ ingr.amount }}</td>
                <!--td>{{ ingr.units }}</td> -->
                <td>{{ingr.edit}}</td> //here I see ingr.edit toggle
                <td>{{ ingr.description }}</td>
             </table>
            </td>
            <td>
                <button type="button" class="btn btn-default" ng-click="ingr.edit = !ingr.edit">
                    <span class="glyphicon glyphicon glyphicon-edit"></span>
                </button> 
            </td>

          </tr>

Include table not div, you can't add div directly on tr

Upvotes: 1

Jelena
Jelena

Reputation: 16

Looking at https://docs.angularjs.org/api/ng/directive/ngShow the code can be modified to:

<button type="button" class="btn btn-default" ng-hide="ingr.edit"> 
     <span class="glyphicon glyphicon glyphicon-edit"></span>                    
</button>

The development still depends on {{ingr}}.

Upvotes: 0

Related Questions