Bind Json data từ Ajax HTTP lên HTML bằng AngularJs

Ví dụ này bind json data lấy từ ajax lên html bằng thư viện angularjs. Data template là các khách sạn được nhóm theo số sao.

<!doctype html>
<html ng-app="MyApp" >
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
	<div ng-repeat="star in [1,2,3,4,5]">
		<h3>{{ star }}</h3>
		<ul>
	  		<li ng-repeat="obj in data | filter:{ star : star }">{{ obj.code }}</li>
	  	</ul>
  	</div>
  	<script>
  		angular.module("MyApp", []).controller("MyCtrl", ['$scope','$http',function($scope, $http){
  				$http.get('/data').success(function(data, stt, headers, config){
  					$scope.data = data;
  				}).error(function errorCallback(data, stt, headers, config){

  				});
  		}])
  	</script>
  </body>
</html>

Backend api sẽ dựng 1 cái đơn giản từ sinatra với data mẫu

require 'sinatra'
require 'sinatra/json'


get '/data' do
	json (1..5).to_a.product((1..10).to_a)
		.collect {|i,j| {
			:star => i,
			:code => 'hotel' + i.to_s + '_' + j.to_s 
		}}
end

get '/' do
	File.read(File.join('public', 'index.html'))
end

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s