我如何仅在angularJS中按下按钮后才加载json数据 [英] How do i load json data only after a button is pressed in angularJS

问题描述

我想要与angularJS网站中的教程类似的东西，但是如何使数据仅在按下按钮后才显示在页面上?

I want something similar to the tutorial in angularJS site but how do i make the data appear on the page only after a button is pressed?

推荐答案

UPDATE

我看到您已经更新了问题，并希望在点击时加载json数据:

UPDATE

I see you've updated your question and want json data loaded on click:

柱塞: http://plnkr.co/edit/nWoSrGxU1yfO6mUhiyvx?p=预览

Plunker: http://plnkr.co/edit/nWoSrGxU1yfO6mUhiyvx?p=preview

HTML 保持不变:

  <button ng-click="clickButton()">Click!</button>
  <div ng-bind="message"></div>

JSON :test.json文件包含:

JSON: test.json file contains:

{"msg": "I AM A TEST MESSAGE" }

角度:这是最基本的方法.您使用$ http并在clickButton()函数中调用它:

Angular: this is the most basic way to do it. You use $http and call it inside your clickButton() function:

var app = angular.module('myTestApp', []);

app.controller('myController', ['$scope', '$http', function($scope, $http) {

  $scope.clickButton = function() {
    $http.get('test.json').success(function(data) {
        $scope.message = data.msg;
      });
  }
  
}]);

希望这会有所帮助.

您需要向我们提供更多信息+代码，以便我们知道您在说什么.但是以下是我想你所追求的:

You need to provide us with some more info + code so we know what you're exactly talking about. But the following is what i think you're after:

HTML :

<div ng-app="myTestApp" ng-controller="myController">
   <button ng-click="clickButton()">Click!</button>
   <div ng-bind="testMessage"></div>
</div>

角度:

angular.module('myTestApp', [])
     .controller('myController', function($scope) {
        $scope.clickButton = function() {
           $scope.testMessage = "I AM A TEST MESSAGE";
        };
     })

小提琴: http://jsfiddle.net/crjLj/

这篇关于我如何仅在angularJS中按下按钮后才加载json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！