current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Okey, please be patience. I only know jquery and I heard that use AngularJS is something that I should try.

So, what I need to to is visit a page on my local host "../asp/fases/fases-controler.asp" parse the json that this page shows me ( that is something like this: { "fasekind": [ "AAA", "BBB", "CCC" ] } ) and then mount on client side a list like this:

<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>

I do need a help with this. I only know the jQuery way. I have seen so many tutorials but I don't get it. I receive always Uncaught ReferenceError: $http is not defined and other erros messages.

I don't want someone to do that for me, I just need to figure out how it works.

js controller that I try... it does not work at all.

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

})
share|improve this question
    
Where is your js/contoller code? –  dcodesmith Jan 8 '14 at 20:30
    
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; }) }) –  Uder Moreira Jan 8 '14 at 20:33
    
@UderMoreira Please do not use comments to add additional code. Edit your question if needed. Anyway, going through the angular docs and following some official tutorials is a way to go. –  Stewie Jan 8 '14 at 22:19
    
I found an answer [here][1], it was missing the JSON parse. [1]: stackoverflow.com/questions/17917238/… –  Uder Moreira Jan 10 '14 at 15:34

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
    
i got errors.angularjs.org/1.2.7/ng/… –  Uder Moreira Jan 8 '14 at 20:46
    
I have updated it –  dcodesmith Jan 8 '14 at 20:48
    
Now i have errors.angularjs.org/1.2.7/ng/… –  Uder Moreira Jan 8 '14 at 20:50
    
Do you have the exact same controller and html I posted? –  dcodesmith Jan 8 '14 at 20:51
    
html little bit diferent: <div class="grid-12-12" ng-app='app' ng-controller='AppCtrl'> <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> –  Uder Moreira Jan 8 '14 at 20:52
up vote 0 down vote

I found an answer here, it was missing the JSON parse I guess. This is what I did:

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.