Question

我是一名新的AngularJS学员。

我的代码正在调用JSON文件并显示输出。但是，我希望调用基于某个变量（即KeyWord）的更改来更改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，可以通过单击红色按钮来更改。我已经定义了mg-model =＆＃34; KeyWord＆＃34;在HTML中，它会更改输出中{{KeyWord}}的值，但它不会发送刷新JSON调用/输出。加载的初始文件是tex3.txt（所有三个文件都可以与第一个记录区分开来。）

可以在此处找到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 Link

如何刷新控制器以更改/刷新AngularJS中的JSON调用？

2 个答案: