angularjs ng-show 无法隐藏

Question

我对 angular 有点陌生，所以这可能是个愚蠢的问题，但我有这段代码：

              <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。我可以在其中一个 table 单元格中看到 ingr.edit 正确切换，但 div 仍然始终可见。

有人可以帮忙吗？谢谢

Answer 1

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

包括table而不是div，你不能直接在tr

上添加div

Answer 2

像这样的事情怎么样？

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> 标签在那里无效，所以它会被完全忽略。

编辑：查看@sag Answer 以查看如何将 div 标记替换为 table 以便执行。

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

angularjs ng-show 无法隐藏

angularjs ng-show can't hide

angularjs

ng-show