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

  <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，你不能直接在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回答看看如何用表替换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}}。

angularjs ng-show无法隐藏

3 个答案: