AngularJS - Как обновить контроллер для изменения/обновления JSON Call

Вот еще один вопрос от нового пользователя AngularJS.AngularJS - Как обновить контроллер для изменения/обновления JSON Call

Мой код вызывает файл JSON и отображает вывод. Тем не менее, я хочу, чтобы вызов изменил вызов JSON на основе изменения определенной переменной (т. Е. KeyWord).

Вот 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 или Text3. txt на основе значения переменной KeyWord, которую можно изменить, нажав красную кнопку. Я определил mg-model = «KeyWord» в HTML, который изменяет значение {{KeyWord}} на выходе, но не отправляет обновленный JSON-вызов/вывод. Загруженным исходным файлом является tex3.txt (все три файла можно отличить от 1-й записи).

Может кто-нибудь помочь? 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 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

удалите $ scope.loadData() из ChangeKW и переместите функцию $ scope.loadData в AppController – Manube

Я переместил его из клиентовКонтроллер. См. Обновленный Plunker http://plnkr.co/edit/G9JfRo?p=preview Но теперь это совсем не работает – Anjum

AngularJS - Как обновить контроллер для изменения/обновления JSON Call

ответ

Смежные вопросы