Question

哦，请耐心等待。我只知道jquery，我听说使用AngularJS是我应该尝试的。

所以，我需要访问的是本地主机上的页面"../asp/fases/fases-controler.asp" 解析这个页面显示的json（就像这样：{ "fasekind": [ "AAA", "BBB", "CCC" ] }），然后在客户端安装一个这样的列表：

<ul>
   <li><input type="checkbox" /> <label>AAA</label></li>
   <li><input type="checkbox" /> <label>BBB</label></li>
   <li><input type="checkbox" /> <label>CCC</label></li>
</ul>

我确实需要帮助。我只知道jQuery的方式。我见过这么多教程但是我没理解。我总是收到Uncaught ReferenceError: $http is not defined和其他错误消息。

我不希望有人为我这样做，我只需要弄清楚它是如何工作的。

js控制器，我尝试...它根本不起作用。

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

app.controller("AppCtrl", function ($http) {
    var app = this;
    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            app.fases = data;
        })

})

Answer 1

<强> CONTROLLER

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

app.controller("AppCtrl", function ($scope, $http) {

    $http.get("../asp/fases/fases-controler.asp")
        .success(function (data) {
            $scope.fases = data;
        });
});

<强> HTML

<div class="grid-12-12" ng-app='currentApp' ng-controller='ACtrl'>
    <label>Fases <em class="formee-req">*</em>
    </label>
    <ul class="formee-list">
        <li ng-repeat="list in fases">
            <input name="checkbox-01" type="checkbox" />
            <label>{{list}}</label>
        </li>
    </ul>
</div>

<强> JSFIDDLE

Answer 2

我找到了答案here，我猜错了JSON解析。这就是我所做的：

<强> JSON

{
  "fasekind": [ 
              "AAA",
              "BBB",
              "CCC" 
              ]
}

<强> CONTROLLER

function FetchCtrl($scope, $http) {
        $scope.url = 'fases/fases-controler.asp';

        $http.get($scope.url).success(function (data, status) {
            $scope.fasekind = data.fasekind;
        }).error(function (data, status) {
                $scope.response = 'Request failed';
            });
}

<强> HTML

    <div class="grid-12-12" ng-controller='FetchCtrl'>
        <label>Fases <em class="formee-req">*</em>
        </label>
        <ul class="formee-list">
            <li ng-repeat="foo in fasekind">
                <input name="checkbox-01" type="checkbox" />
                <label>{{foo}}</label>
            </li>
        </ul>
    </div>

如何使用AngularJS从数据源获取数据？

2 个答案: