Question

我想在按钮点击时调用一个函数，其中HTTP调用从JSON文件读取数据，当HTML加载来自JSON文件的数据加载到<ul>时，以下代码正常工作但是我想调用函数按钮（继续按钮）单击，我该如何实现？因为当我在函数中编码http.get方法并按下按钮时，它不起作用。

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

您需要将代码包装在函数中，并使用ng-click指令单击调用该函数。

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;
 });
};

在html中使用

ng-click="vm.getData()"

Answer 3

您可以像这样修改按钮

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

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

3 个答案: