AngularJS：如何在单击按钮时读取JSON文件的数据？

Question

I want to call a function on button click in which HTTP called to read data from JSON file , Following code is working fine when HTML loads the data from JSON file is loading on <ul> but I want to call function on button (Continue button) click , How can I achieve this? because when I encoded http.get method in a function and calls on button click it doesn't work .

HTML

 <label class="item">
              <button class="button button-block button-positive" id="ForgotPasswordSubmit" type="submit"  ng-disabled="ForgotPasswordForm.$invalid" >Continue</button>

            </label>
    <ul>
      <li ng-repeat="x in loginData">
        {{ x.result +','+ x.status}}
      </li>
    </ul>

SignupCtrl.js

use strict';
angular.module('User').controller('SignupCtrl', ['$scope', '$http','$state', "SettingService", function($scope,$http, $state, SettingService) {

    /*LoginCtrl code will come here*/
    var vm = this;

 vm.signup = function(){
  $state.go('app.orderlist');
 };


 $http.get("forgotpassword.json").success(function (data) {
      $scope.loginData = data;

  });

}]);

Answer 1

You need to wrap the code inside a function and call the function on click using the ng-click directive.

vm.getData = function(){
  $http.get("forgotpassword.json").success(function (data) {
      $scope.loginData = data;

  });
}

HTML:

  <button class="button button-block button-positive" id="ForgotPasswordSubmit" type="submit" ng-click="vm.getData()"  ng-disabled="ForgotPasswordForm.$invalid" >Continue</button>

Answer 2

vm.getData= function(){
$http.get("forgotpassword.json").success(function (data) {
  $scope.loginData = data;
 });
};

In html use

ng-click="vm.getData()"

Answer 3

you can modify your button like this

 <button class="button button-block button-positive" id="ForgotPasswordSubmit" type="button"  ng-disabled="ForgotPasswordForm.$invalid" 
ng-click="functionForLoadData()">Continue</button>