How to load json into my angular.js ng-model?

Question

As Kris mentions, you can use the $resource service to interact with the server, but I get the impression you are beginning your journey with Angular – I was there last week – so I recommend to start experimenting directly with the $http service. In this case you can call its get method.

If you have the following JSON

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

You can load it like this

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

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

The get method returns a promise object which
first argument is a success callback and the second an error
callback.

When you add $http as a parameter of a function Angular does it magic
and injects the $http resource into your controller.

I’ve put some examples here

http://plnkr.co/edit/Wuc6M7?p=preview
https://gist.github.com/3938567

Leave a Comment Cancel reply