AngularJS ng-Show kann sich nicht verstecken

Question

ich Winkel irgendwie neu bin so kann dies eine dumme Frage, aber ich habe diese Code-Snippet:

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

aber ich kann das div nicht verbergen. Ich kann in einer der Tabellenzellen sehen, dass ingr.edit korrekt umschaltet, aber immer noch ist das div immer sichtbar.

Kann jemand helfen? dank

Answer 1

Was ist so etwas wie das?

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 ist die ng-show im <tr> weil <div> Tag bewegt es ungültig, so dass es gewesen sein wird völlig ignoriert.

BEARBEITEN: siehe @ sag Antwort, um zu sehen, wie das div-Tag durch eine Tabelle ersetzt wird, damit es ausgeführt wird.

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

Die Entwicklung noch auf {{ingr}} abhängt:

Answer 2

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

Tabelle enthalten nicht div, können Sie nicht div hinzufügen direkt auf tr

Answer 3

bei https://docs.angularjs.org/api/ng/directive/ngShow kann der Code der Suche zu modifizieren.