AngularJS - 如何刷新控制器更改/刷新JSON调用

这是来自一个新的AngularJS学习者的另一个问题。AngularJS - 如何刷新控制器更改/刷新JSON调用

我的代码调用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>

而且这里有云控制器部分：

======== Code Removed to Save Space. See the Update Below ======

我想要的程序加载相应的JSON文件text1.txt，text2.txt或文字3。 txt基于KeyWord变量的值，可以通过点击红色按钮来改变。我已经在HTML中定义了mg-model =“KeyWord”，它改变了输出中{{KeyWord}}的值，但它不发送刷新JSON调用/输出。加载的初始文件是tex3.txt（所有三个文件可以与第一条记录区分开来）。

有人可以帮忙吗？该Plunker可以在这里找到：Plunker

=========== UPDATE ==============

下面是最终的解决方案，我发现有@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

希望像我这样一个新手认为这是有帮助的。

来源

2015-02-08 Anjum

你可能需要：

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

的“$手表”就会自动使$ HTTP调用，每次$ scope.keyWord变化。

来源

2015-02-08 18:55:26 Manube

我已经添加了$ watch，并专门调用loadData函数也没有任何成功。还要将控制器更改为一个功能。请看看更新后的代码：http://plnkr.co/edit/G9JfRo?p=preview – Anjum 2015-02-08 19:26:19

请从ChangeKW中删除$ scope.loadData（），并将$ scope.loadData函数移动到AppController – Manube 2015-02-08 19:40:09

我已将它移动out of customersControler。看到更新的Plunker http://plnkr.co/edit/G9JfRo?p=preview 但现在它根本不工作 – Anjum 2015-02-08 19:52:28

AngularJS - 如何刷新控制器更改/刷新JSON调用

回答

相关问题