Question

我在加载页面时使用加载微调器。

App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
$scope.loading = true;

    $scope.allotmentStatus = [
    {"value": "", "text": "All"},
    {"value": "ALLOTTED", "text": "ALLOTTED"},
    {"value": "UNALLOTTED", "text": "UNALLOTTED"}
    ];

    $http.get(serverUrl).then(function (result) {
        $scope.itemList = result;
    });

    $scope.changeItemList = function () {
      $scope.loading = true;
      $http.get(newServerUrl).then(function (result) {
          $scope.itemList = result;
          $scope.loading = false;
          });
    }

    $scope.changeItemListAccordingToStatus = function (alotment) {
         $scope.loading = true;
         $http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
                $scope.itemList = result;
                $scope.loading = false;
              });
     };

     // Other functions
     $scope.loading = false;
]}

在视图页面中：

 <div ng-controller="ItemsController">
     <button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>

    <select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus"                                                            ng-change="changeItemListAccordingToStatus(allotment.value)"></select>


        <table>
            <img src="app/img/spinner.gif" ng-show="loading"/>
           <tr ng-repeat="item in itemList">
               <td>{{item.name}}</td>
               <td>{{item.quentity}}</td>
               <td>{{item.status}}<td>
           </tr>
        </table>
 </div>

第一次页面加载时，加载微调器工作正常，但是当我单击按钮并更改select标签的值时，list的值会根据API调用而改变，但加载微调器不起作用。（按钮单击时使用ng-click，选择标记中使用ng-change）

任何建议都会令人感激。谢谢

Answer 1

使用我们之前讨论过的另一个变量，因为你的变量可能会从另一个地方反映出来。

App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
//$scope.loading = true;

    $scope.allotmentStatus = [
    {"value": "", "text": "All"},
    {"value": "ALLOTTED", "text": "ALLOTTED"},
    {"value": "UNALLOTTED", "text": "UNALLOTTED"}
    ];

    $http.get(serverUrl).then(function (result) {
        $scope.itemList = result;
    });

    $scope.changeItemList = function () {
      $scope.loadingSpinner = true;
      $http.get(newServerUrl).then(function (result) {
          $scope.itemList = result;
          $scope.loadingSpinner = false;
          });
    }

    $scope.changeItemListAccordingToStatus = function (alotment) {
         $scope.loadingSpinner = true;
         $http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
                $scope.itemList = result;
                $scope.loadingSpinner = false;
              });
     };

     // Other functions
     $scope.loadingSpinner = false;
]}

HTML

<div ng-controller="ItemsController">
     <button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>

    <select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus"                                                            ng-change="changeItemListAccordingToStatus(allotment.value)"></select>


        <table>
            <img src="app/img/spinner.gif" ng-show="loadingSpinner"/>
           <tr ng-repeat="item in itemList">
               <td>{{item.name}}</td>
               <td>{{item.quentity}}</td>
               <td>{{item.status}}<td>
           </tr>
        </table>
 </div>

加载微调器不适用于Angularjs中的ng-click或ng-change

1 个答案: