如何刷新控制器以 change/refresh JSON 调用 AngularJS？

Question

我是新 AngularJS 学习者。

我的代码正在调用 JSON 文件并显示输出。但是，我希望调用根据某些变量（即关键字）的变化来更改 JSON 调用。

这是HTML部分：

<body ng-controller="AppController">

  <button type="button" class="btn btn-danger" ng-click="ChangeKW()">
    Click to Change KeyWord
  </button>


  <div ng-controller="customersController as custCont" ng-model="keyWord">
    KeyWord:{{ keyWord }} ==== iter:{{ iter }}
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
  </div>

</body>

这里是控制器部分：

  var app = angular.module('App', []);

  app.controller('AppController', function($scope, $window) {

    $scope.keyWord = 3;
    $scope.iter = 1;

    $scope.ChangeKW = function() {
      if ( $scope.keyWord === 3 )
        $scope.keyWord = 1;
      else
        $scope.keyWord = $scope.keyWord + 1;
    }
  });

  app.controller("customersController", function($scope, $http) {

    $scope.iter = $scope.iter + 1;
    $http({
      url: 'test' + $scope.keyWord + '.txt',
      dataType: 'json',
      method: 'GET',
      data: '',
      headers: {
        "Content-Type": "application/json"
      }
    }).success(function(response) {
      $scope.names = response;
    }).error(function(error) {
      $scope.names = [{
        "Name": "Errrrrrr"
      }];
    });

  });

我希望程序根据 KeyWord 变量的值加载相应的 JSON 文件 text1.txt、text2.txt 或 text3.txt，可以通过单击红色按钮。我在 HTML 中定义了 mg-model="KeyWord"，这会更改输出中 {{ KeyWord }} 的值，但不会发送刷新 JSON call/output。初始加载的文件是tex3.txt（三个文件都可以从第1条记录中区分出来）。

Plunker 可以在这里找到：Plunker。

Answer 1

您可能需要：

$scope.$watch('keyWord',function()
  {
    //$http call here 
  }
);

每次 $scope.keyWord 发生变化时，“$watch”都会自动调用 $http。

Answer 2

(代题作者发表).

这是我在@Manube 的帮助下找到的最终解决方案：

HTML

<body ng-controller="AppController">

      <button type="button" class="btn btn-danger" ng-click="ChangeKW()">
        Click to Change KeyWord
      </button>


  <div ng-controller="customersController as custCont" ng-model="keyWord">
    KeyWord:{{ keyWord }} ==== iter:{{ iter }}
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
  </div>

</body>

这是控制器代码

(function() {
  var app = angular.module('App', []);

  app.controller('AppController', function($scope, $window,$http) {

    $scope.keyWord = 3;
    $scope.iter = 1;

    $scope.ChangeKW = function() {
      if ($scope.keyWord >2)
        $scope.keyWord = 1;
      else
        $scope.keyWord = $scope.keyWord + 1;
    };

    $scope.loadData = function() {
      $scope.iter = $scope.iter + 1;
      $http({
        url: 'test' + $scope.keyWord + '.txt',
        dataType: 'json',
        method: 'GET',
        data: '',
        headers: {
          "Content-Type": "application/json"
        }
      }).success(function(response) {
        $scope.names = response;
      }).error(function(error) {
        $scope.names = [{
          "Name": "Errrrrrr"
        }];
      });
    };

    $scope.$watch('keyWord', function() {
      $scope.loadData();
    });


    $scope.customersController = function($scope, $http) {

      $scope.loadData();
    };


  });


})();

可以在这里找到一个可用的 Plunker：Plunker Link

如何刷新控制器以 change/refresh JSON 调用 AngularJS？

How to refresh controller to change/refresh JSON call in AngularJS?

javascript

ajax

json

angularjs

refresh