javascript - 在 Angular 中重新加载数据

标签 javascript angularjs refresh

我尝试执行重新加载数据按钮。这是我的 json:

    [
        {
            "name": "AAAAAA",
            "data": "False"

        },

        {
            "name": "BBBBBB",
            "data": "45%"
        },
        {
            "name": "CCCCC",
            "data": "12%"
        }
]

我的 JavaScript:

app.service('service', function($http, $q) {

  var deferred = $q.defer();

  $http.get('names.json').then(function(data) {
    deferred.resolve(data);
  });

  this.getNames = function() {
    return deferred.promise;
  }
});

app.controller('FirstCtrl', function($scope, service, $http) {
  var vm = this;
  vm.reloadData = function() {
    console.log("reloading");
    vm.loadData();
  };

  vm.loadData = function() {
    var promise = service.getNames();
    promise.then(function(data) {
      $scope.names = data.data;
      console.log($scope.names);
    });
  }

  vm.loadData();
});

我的 HTML :

    <div ng-controller="FirstCtrl as vm">
      <table>
        <tbody>
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.data}}</td>
          </tr>
        </tbody>
      </table>
      <button ng-click="vm.reloadData()">Reload</button>
    </div>

我的数据应该在单击函数“vm.reloadData()”后重新加载,但没有任何反应,我的数据不刷新。 感谢您提前的答复。

最佳答案

试试这个:

  1. 我已将您的额外 promise 删除为 $http 本身返回 promise ..
  2. 添加了不将请求数据保留在缓存中的规定

       app.service('service', function($http, $q) {
          this.getNames = function() {
             return $http.get('names.json', { cache: false});
          }
        });
    
        app.controller('FirstCtrl', function($scope, service) {
          var vm = this;
          vm.reloadData = function() {
            console.log("reloading");
            vm.loadData();
          };
    
          vm.loadData = function() {
            var promise = service.getNames();
            promise.then(function(data) {
              $scope.names = data.data;
              console.log($scope.names);
            });
          }
    
          vm.loadData();
        });
    

关于javascript - 在 Angular 中重新加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41670987/

相关文章:

TinyMCE 中的动态菜单按钮项

javascript - 使用 Java Script 和/或 jquery 更新图像

javascript - 标题下的 Angular Material sidenav

angularjs - 如何让我的文本根据 http 请求的结果不断更改,直到满足结束条件?

javascript - 如何限制用户在日期字段中手动输入日期

javascript - 使用多维数组循环对象

javascript - Angular App - 重写问题

azure - 电源查询刷新导致无法访问 azure dwh 中的表

javascript - 在 JSX 中显示状态列表

javascript - jQuery 颜色替换有时有效,有时无效