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調用

回答

相關問題