AngularJS ng-show / ng-hide

我们正在尝试将此Stackoverflow示例合并到我们的AngularJS脚本中，似乎无法弄清楚为什么它无法正常工作。

我们想要显示一个加载图标，直到呈现JSON数据为止，一旦JSON准备就绪，我们就希望该图标隐藏起来。

这些是我们在示例中使用的主要片段：'$ scope.dataLoaded = false;' 'ng-hide =“ dataLoaded”''$ scope.dataLoaded = true;' 'ng-show =“ dataLoaded”'

如果有人看到我们错过了什么或我们做错了什么，请告诉我们。谢谢你。

柱塞

的HTML

<div class="page-header col-md-12">
  <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
</div>
<div class="col-md-12"> 
  <p class="text-center" ng-hide="dataLoaded">
    <i class="fa fa-circle-o-notch fa-spin"></i>
  </p>

  <div class="panel panel-info" ng-controller="warrantySingleController" ng-show="dataLoaded">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
    </div>
    <div class="panel-body">
      <div class="bs-component">
       <table class="table table-striped table-hover" >
          <tbody>
            <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
            <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
            <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
            <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
          </tbody>
        </table> 
      </div>
    </div>
  </div>
</div>

控制器

.controller('warrantySingleController', function($scope, $http, $stateParams) {
  $scope.params = $stateParams.jobID[0];
  $scope.dataLoaded = false;
  $http({
    url: 'http://jsonstub.com/warranty/'+$scope.params,
    method: 'GET',
    dataType: 'json', 
    data: '',         
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'http://run.plnkr.co',
        'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
        'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function (data, status, headers, config) {
    $scope.warrantySingleData = data;
    $scope.dataLoaded = true;
  }).error(function(data,status,error,config){
    $scope.warrantySingleData =  [{heading:"Error",description:"Could not load json data"}];
    $scope.dataLoaded = false;
  });
})

回答者

<div ng-controller="warrantySingleController">
  <div class="page-header col-md-12">
    <h4><i class="fa fa-tasks"></i> Warranty Job</h4>
  </div>
  <div class="col-md-12"> 
    <p class="text-center" ng-hide="dataLoaded">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </p>

    <div class="panel panel-info"  ng-show="dataLoaded">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-tasks"></i> {{warrantySingleData[0].Title}}</h3>
      </div>
      <div class="panel-body">
        <div class="bs-component">
         <table class="table table-striped table-hover" >
            <tbody>
              <tr><td>JobID: {{warrantySingleData[0].JobID}}</td></tr>
              <tr><td>Model: {{warrantySingleData[0].Model}}</td></tr>
              <tr><td>Title: {{warrantySingleData[0].Title}}</td></tr>
              <tr><td>Date: {{warrantySingleData[0].ReminderDate}}</td></tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>