Question

我是AngularJS的新手，这是我的controller.js文件的一部分，我使登录控制器使用相同的服务，就是这个。

我现在想要实现的是使用与我的服务不同的方法从AJAX调用获取数据，并将其传递给我的HTML。

这样做的正确方法是什么？这是我尝试过的，我根据之前的Chrome Packaged App项目编写了这段代码。不同的是，在我的第一个项目中，我有一个单独的javascript文件来更改我的HTML中的显示，这一次，我通过控制器，服务和应用程序来操作它。

.controller('VFCtrl', function($scope, $stateParams, $http, $ionicLoading, $state, $sce) {
        $ionicLoading.show({
            template: 'Loading...',
            duration: 1000
        });

        $http.post('myService/mysite.aspx',{action: 'someMethodFromService', ParameterFromMethod: 'someValue'})
              .success(function (response) 
              {
                  var htmldata='';
                  for(i=0;i<response.length;i++)
                  {
                      var htmlInfo = '<li><div class=\'col\'><a href="'+ response[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+response[i].Image + '" class=\'profile-img\' /><h3>' +response[i].Name+'</h3><p>'+response[i].Title+'</p></a></div></li>';

                      htmldata+= htmlInfo;
                  }
                    $("#vflist").html(htmldata);
              })
       //I don't wanna change how to submit data in my html in the success part
       //But if it MUST be change then I will.
              .error(function(data, status, headers){
                 console.log(status);
              });

    })

Answer 1

您可以设置ng-repeat并绑定数组中对象的成员。虽然这不是基于您的代码，但这是一个非常简单的示例，说明如何实现这一目标：http://codepen.io/anon/pen/LNBrbG?editors=1010。

基本上，您放置ng-repeat的元素将成为重复的模板。因此，如果将10个元素嵌套在元素内部并且ng-repeat上，则会重复相同的结构。它将重复绑定到它的任意数量的项目。有关工作示例，请参阅代码笔。

<ul>
    <li ng-repeat="item in vm.items"><span style="color:red">{{ item.name }}</span></li>
<ul>

Answer 2

你根本不需要jQuery，Angular就足够了。另外，在Angular控制器中操作DOM并不是一个好习惯。

考虑改变你的代码，如下面的工作示例（当然，JSON结构与你提出的不同）：

＆＃13;

var app = angular.module("sa", [])
app.controller('VFCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts', {
      action: 'someMethodFromService',
      ParameterFromMethod: 'someValue'
    })
    .success(function(data) {
      $scope.posts = data;
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="VFCtrl">
  <ul id="vflist">
    <li ng-repeat="post in posts">
      <a href="{{post.id}}">{{post.title}}</a>
  </ul>
</div>

＆＃13;

AngularJS中的AJAX调用post方法

2 个答案: