Question

我有以下代码。目标是，为每个单击的<span>显示微调器 - 但它没有显示。为什么？

<tr ng-repeat="cat in myItems">
   <td>
      <div class='spinner' ng-show="{{cat.loading}}">
         <img src='/Content/loading.GIF' alt=''/>
      </div>
      <div ng-click="changeItem(cat)" class="contentCell">              
         <span>click me</span>
      </div>
   </td>
</tr>

控制器：

$scope.changeItem = function (cat) {
        cat.loading = true;
        catService.doSth(cat.id).then(function (data) {
            cat.loading = false;
        });
    }

我看到div有ng-hide个类，无论ng-show="false"还是ng-show="true"它仍然存在，我认为这可能是原因

<div class="spinner ng-hide" ng-show="false">
   <img alt="" src="/Content/loading.GIF">
</div>

Answer 1

尝试删除ng-show中的{{}}，它会计算表达式，而不是值。

<tr ng-repeat="cat in myItems">
   <td>
      <div class='spinner' ng-show="cat.loading">
         <img src='/Content/loading.GIF' alt=''/>
      </div>
      <div ng-click="changeItem(cat)" class="contentCell">              
         <span>click me</span>
      </div>
   </td>
</tr>

Answer 2

试试这个：

   $scope.cat = false;
    $scope.changeItem = function (cat) {
            $scope.cat.loading = true;
            catService.doSth(cat.id).then(function (data) {
                 $scope.cat.loading = false;
            });
        }

您正在尝试对$ scope.cat做出反应，但它不存在

AngularJS ng-repeat显示微调器

2 个答案: