如何在角度中使用ng-click

时间:2016-03-25 10:46:09

标签: javascript angularjs

我用角度写了一个litlle程序。当我转到url:http://localhost:8080/api/v1/projects(获取请求)时,我在浏览器中看到了一个json表。我想要做的是拥有这些对象的“列表”。我的意思是用户而不仅仅是json。

这些是我的文件:

index.html,index.js和service.js

service.js

var app = angular.module('app');

app.service('apiService', ['$http', function($http) {
  this.get = function() {
    return $http.get("http://localhost:8080/api/v1/projects");
  };
  this.delete = function(id) {
    return $http.delete("http://localhost:8080/api/v1/projects/{id}", id);
  }
  this.post = function(data){
    return $http.post("http://localhost:8080/api/v1/projects", data);
  }
}]);

index.js

app.controller('controller', ['$scope', 'apiService', function($scope, apiService) {
  var vm = this;
  var getData = apiService.get().success(function(data) {
    vm.data = data;
  }); 
}]);

的index.html

  <!DOCTYPE html>
  <html lang="en" ng-app="myApp">
  <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javavscript" src="angular.min.js"></script>
  <script type="text/javavscript" src="index.js"></script>
  <script type="text/javavscript" src="service.js"></script>
  </head>
  <body>

  <div ng-controller="controller as ctrl">
  <div ng-repeat="data in ctrl.data">{{data.name}}</div>
  </div>

  </body></html>

如果我转到我的网址而不是查看json列表,请告诉我如何在我的代码中包含ng-click(或显示结果的任何方法)以获取文档列表

谢谢!

1 个答案:

答案 0 :(得分:0)

你可以做一个$州。我不确定这是否是您尝试完成的内容,但首先您可以在https://localhost:8080/home启动用户..然后您可以使用ng-click创建一个按钮:

<input type="submit" ng-click="redirectTo("http://localhost:8080/api/v1/projects")"/>

在控制器中:

app.ctrl('HomeCtrl', ["$scope", "$state", function($scope,$state){
  $scope.redirectTo = function(url){
    window.location.href = url;//This because i dont know the state your trying to go to..
  }
}])

然后在此之后将重定向。然后现在,如果你想显示网址,你可以在该页面中执行此操作:

<input type="submit"
 ng-click="getJSON"/>

app.controller('JSONCtrl', ["$scope","apiService" function($scope,apiService){
  $scope.getJSON = function(){
    apiService.get().then(function(sucess){
     //Sucess Method..
    }).catch(function(err){
     //Error..
    })
  }
}])