var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!-- script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link src="css/app.css" ref="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>Hello {{name}}!</h3>
<div ng-show="loading"><img src="http://www.ingleinternational.com/images/global/loading.gif" /></div>
<div id="items">
<ul>
<li ng-repeat="item in items ">
Item : {{item.itemno}}
<br/> Name : {{item.name}}
<br/> Price : {{item.price}}
<br/>
</li>
</ul>
</div>
<hr>
<div>
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" id="singleSelect" ng-model="singleSelect">
<option value="" selected="selected">---Please select---</option> <!-- not selected / blank option -->
<option ng-repeat="i in items" value="{{i.itemno}}">{{i.name}}</option> <!-- interpolation -->
</select><br>
<tt>singleSelect = {{singleSelect}}</tt>
</div>
<hr>
<div>
<button id="item-button" type="button" class="btn btn-primary" ng-click="getitem(singleSelect)">Get Item Selected</button>
<ul>
<li>Item#: {{singleitem.itemno}}</li>
<li>Name: {{singleitem.name}}</li>
<li>Price: {{singleitem.price}}</li>
<li>Stock: {{singleitem.stock}}</li>
</ul>
</div>
<hr>
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-repeat="i in items" role="menuitem"><a href="#">{{i.name}}</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<hr>
<!-- Split button -->
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<hr>
<pre><code>{{prettyPrint(response)}}</code></pre>
</body>
</html>
/* Put your css in here */
app.controller('MainCtrl', function($scope, $sce, jsonService) {
$scope.name = 'World';
$scope.loading = true;
$scope.singleSelect = '';
jsonService.getjson().then(function(d) {
console.log("bigctrl" + d);
$scope.response = d;
$scope.items = d.data.item;
$scope.loading = false;
});
$scope.getitem = function(item) {
console.log('getitem:',item);
if (item) {
jsonService.getitem(item).then(function(data){
$scope.singleitem = data.data.item[0];
});
} else {
$scope.singleitem = null;
}
}
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.prettyPrint = function(obj) {
var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
return JSON.stringify(obj, null, 3);
};
});
app.factory('jsonService', function($http) {
return {
getjson: function() {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('http://stars400.opcso.org:8014/stockqty/')
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("big" + response);
console.log("json", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
},
getitem: function(value) {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('http://stars400.opcso.org:8014/stockqty/'+value)
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("itemJson", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
}
}
});
{
"acteurs": [
{
"id": "1",
"nom": "Robert",
"prenom": "Downey Jr.",
"hero": "Iron Man",
"photo": "http://fr.web.img6.acsta.net/r_120_160/b_1_d6d6d6/pictures/210/017/21001798_20130426172912097.jpg"
},
{
"id": "2",
"nom": "Evans",
"prenom": "Chris",
"hero": "Captain America",
"photo": "http://fr.web.img1.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/35/47/92/20091403.jpg"
},
{
"id": "3",
"nom": "Ruffalo",
"prenom": "Mark",
"hero": "The Hulk",
"photo": "http://fr.web.img5.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/35/35/82/20091405.jpg"
},
{
"id": "4",
"nom": "Hemsworth",
"prenom": "Chris",
"hero": "Thor",
"photo": "http://fr.web.img4.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/62/86/25/20092235.jpg"
},
{
"id": "5",
"nom": "Johansson",
"prenom": "Scarlett",
"hero": "Black Widow",
"photo": "http://fr.web.img1.acsta.net/r_120_160/b_1_d6d6d6/pictures/210/380/21038084_20130909122416886.jpg"
}
]
}
pre {
background-color: ghostwhite;
border: 1px solid silver;
padding: 10px 20px;
margin: 20px;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}