angularjs нг-шоу не может скрыть

Question

Я своего рода новый угловому так что это может быть глупый вопрос, но у меня есть этот фрагмент кода:

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

, но я не могу скрыть DIV. Я могу видеть в одной из ячеек таблицы, что ingr.edit правильно переключается, но все же div всегда отображается.

Может кто-нибудь помочь? благодаря

Answer 1

А что-то вроде этого?

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>

Я переехал ng-show в <tr>, потому что <div> тег недопустим там так будет было полностью проигнорировано.

EDIT: см. @ Sag. Ответьте, чтобы увидеть, как заменить тег div на таблицу, чтобы он выполнялся.

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> 

Включить таблицу не Див, вы не можете добавить DIV непосредственно на тр

Answer 3

Глядя на https://docs.angularjs.org/api/ng/directive/ngShow кода может быть изменен на:

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

Развития все еще зависит от {{ingr}}.