Hello here's my json :
[
{
"name": "AAAAAA",
"loading": "False",
},
{
"name": "BBBBBB",
"loading": "45%",
},
{
"name": "CCCCCC",
"loading": "12%",
},
{
"name": "DDDDDD",
"loading": "False",
}
]
My javascript :
var app = angular.module('app', []);
app.service('service', function($http, $q){
var deferred = $q.defer();
$http.get('names.json').then(function(data){
deferred.resolve(data);
});
this.getNames = function() {
return deferred.promise;
}
});
app.controller('FirstCtrl', function($scope, service, $http) {
var promise = service.getNames();
promise.then(function (data) {
$scope.names = data.data;
console.log($scope.names);
}
);
HTML :
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.loading}}</td>
</tr>
</tbody>
What i try to do is loading bar for name.loading %. I get it from server, and the % is loading for something, so it still load (ex. in first second 15%, in second 25%...), and when its 100% name.loading = "False". I need loading bar in the table name.loading, only when its %, when its "False", in table should be just "False".
Thanks in advance
You can use progress in html5.
Edit your code like below.
<td><progress value="{{name.loading}}" max="100" ng-if="name.loading != 'False'">{{name.loading}} %</progress></td>
You can use ngIf directive to achieve that.
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td ng-if="name.loading !== 'False'">{{name.loading}}</td>
</tr>
</tbody>
Related
I am using a loading spinner while loading a page.
App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
$scope.loading = true;
$scope.allotmentStatus = [
{"value": "", "text": "All"},
{"value": "ALLOTTED", "text": "ALLOTTED"},
{"value": "UNALLOTTED", "text": "UNALLOTTED"}
];
$http.get(serverUrl).then(function (result) {
$scope.itemList = result;
});
$scope.changeItemList = function () {
$scope.loading = true;
$http.get(newServerUrl).then(function (result) {
$scope.itemList = result;
$scope.loading = false;
});
}
$scope.changeItemListAccordingToStatus = function (alotment) {
$scope.loading = true;
$http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
$scope.itemList = result;
$scope.loading = false;
});
};
// Other functions
$scope.loading = false;
]}
And in view page :
<div ng-controller="ItemsController">
<button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>
<select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus" ng-change="changeItemListAccordingToStatus(allotment.value)"></select>
<table>
<img src="app/img/spinner.gif" ng-show="loading"/>
<tr ng-repeat="item in itemList">
<td>{{item.name}}</td>
<td>{{item.quentity}}</td>
<td>{{item.status}}<td>
</tr>
</table>
</div>
Loading spinner is working fine when page load first time, But when I click on button and change value of select tag the value of list are changing according to API call, But the loading spinner is not working. (ng-click is used in button click, and ng-change is used in Select tag)
Any suggestion will be appreciable . Thank you
Use another variable as we have discussed earlier because your variable may got reflected from another places.
App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){
//$scope.loading = true;
$scope.allotmentStatus = [
{"value": "", "text": "All"},
{"value": "ALLOTTED", "text": "ALLOTTED"},
{"value": "UNALLOTTED", "text": "UNALLOTTED"}
];
$http.get(serverUrl).then(function (result) {
$scope.itemList = result;
});
$scope.changeItemList = function () {
$scope.loadingSpinner = true;
$http.get(newServerUrl).then(function (result) {
$scope.itemList = result;
$scope.loadingSpinner = false;
});
}
$scope.changeItemListAccordingToStatus = function (alotment) {
$scope.loadingSpinner = true;
$http.get(newServerUrl+'?alotment='+alotment).then(function (result) {
$scope.itemList = result;
$scope.loadingSpinner = false;
});
};
// Other functions
$scope.loadingSpinner = false;
]}
HTML
<div ng-controller="ItemsController">
<button class="btn btn-primary" ng-click="changeItemList()"> Check New Items </button>
<select id="allotmentStatus" data-ng-model="allotment" ng-options="c.text for c in allotmentStatus" ng-change="changeItemListAccordingToStatus(allotment.value)"></select>
<table>
<img src="app/img/spinner.gif" ng-show="loadingSpinner"/>
<tr ng-repeat="item in itemList">
<td>{{item.name}}</td>
<td>{{item.quentity}}</td>
<td>{{item.status}}<td>
</tr>
</table>
</div>
I've seen so many ways to do this, but most are pretty old and I want to make sure I'm doing this correctly. Right now, the way I'm using isn't working and I feel like I'm missing something.
I'm getting the JSON back fine, I just need to get it to display in a table after I click the button.
Here is the JSON. This is how I'm going to get it from our server, I can't add any "var JSON =" or add any scope like "$scope.carrier" to the data, unless there's a way to add it after I've fetched the data.
{
"carrier":
[
{
"entity": "carrier",
"id": 1,
"parentEntity": "ORMS",
"value": "Medica"
}, {
"entity": "carrier",
"id": 2,
"parentEntity": "ORMS",
"value": "UHG"
}, {
"entity": "carrier",
"id": 3,
"parentEntity": "ORMS",
"value": "Optum"
}, {
"entity": "carrier",
"id": 4,
"parentEntity": "ORMS",
"value": "Insight"
}, {
"entity": "carrier",
"id": 5,
"parentEntity": "ORMS",
"value": "Insight"
}
]
}
Here is the app.js file to bring back the JSON data:
var app = angular.module('myTestApp', []);
app.controller('myController', ['$scope', '$http', function($scope, $http) {
var url = 'test.json';
$scope.clickButton = function() {
$http.get(url).success(function(data) {
console.log(data);
});
}
}]);
And then of course the HTML:
<div class="col-lg-12 text-center">
<button type=button class="btn btn-primary load" ng-click="clickButton()">Click!</button>
<table class="">
<tbody ng-repeat="carrier in carriers">
<tr>
<td>
<h3 class="">{{ module.entity }}</h3>
<h3 class="">{{ module.id }}</h3>
<h3 class="">{{ module.parentEntity }}</h3>
<h3 class="">{{ module.value }}</h3>
</td>
</tr>
</tbody>
</table>
</div>
I'm also wondering if I can use the ng-grid to put this in a table. I know they just upgraded it to ui grid so I'm not sure if this is still a feasible approach.
Also, I'm not getting errors, the data just won't display in the table right now. All I know is its returning the data properly, just not displaying in the table.
Any help is appreciated.
I looked at your plunker seems like you need to:
add angular script
wire the app and the controller
your variable in the repeater is wrong, I change it
take a look to this fixed plunker:
http://plnkr.co/edit/TAjnUCMOBxQTC6lNJL8j?p=preview
$scope.clickButton = function() {
$http.get(url).success(function(returnValue) {
alert(JSON.stringify(returnValue.carrier));
$scope.carriers = returnValue.carrier;
});
}
You never assign the value of the returned array to $scope.carriers.
At the line where you say console.log(data); add this:
$scope.carriers = data.data;
Here is the updated clickButton function (with a variable name change to reduce confusion):
$scope.clickButton = function() {
$http.get(url).success(function(returnValue) {
$scope.carriers = returnValue.data;
});
};
I need to use ng-repeat with ng-bind to display data into a table but what I have tried doesn't display any data,where am I going wrong with the code that I tried?
HTML:
<tbody id="ngDowntimeBody">
<tr ng-repeat="previousdowntime in GetPreviousDowntimeEvents.PreviousDowntimeEvents">
<td ng-bind="previousdowntime.CategoryId"></td>
<td ng-bind="previousdowntime.StartTime"></td>
<td ng-bind="previousdowntime.EndTime"></td>
<td ng-bind="previousdowntime.Comment"></td>
</tr>
</tbody>
JS:
function GetPreviousDowntimeEvents($http) {
var self = this;
self.PreviousDowntimeEvents = [];
self.AjaxData = ngHesto.Ajax.Get($http
, {
url: PREVIOUS_DOWNTIME_EVENTS
, success: function (data) {
self.PreviousDowntimeEvents = data.data[0];
console.log(self.PreviousDowntimeEvents);
}
});
}
var ngAppModule = angular.module('myApp', []);
ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
$scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);
}]);
The Data doesn't get displayed
This is the response I get back:
{EventId: "10", DepartmentId: "7", CategoryId: "10", StartTime: "2014-08-19T10:00:00", EndTime: "2014-08-19T10:10:00",Comment:"Test"}
JS
function GetPreviousDowntimeEvents($http) {
var self = this;
self.PreviousDowntimeEvents = [];
self.AjaxData = ngHesto.Ajax.Get($http
, {
url: PREVIOUS_DOWNTIME_EVENTS
, success: function (data) {
self.PreviousDowntimeEvents = data.data;
console.log(self.PreviousDowntimeEvents);
}
});
}
var ngAppModule = angular.module('myApp', []);
ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
$scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);
}]);
HTML
<tbody id="ngDowntimeBody">
<tr ng-repeat="previousdowntime in GetPreviousDowntimeEvents.PreviousDowntimeEvents">
<td>{{previousdowntime.CategoryId}}</td>
<td>{{previousdowntime.StartTime}}</td>
<td>{{previousdowntime.EndTime}}</td>
<td>{{previousdowntime.Comment}}</td>
</tr>
</tbody>
</table>
I guess you do not need this new staff there
instead of
ngAppModule.controller('DowntimeController', ['$scope','$http', function ($scope, $http) {
$scope.GetPreviousDowntimeEvents = new GetPreviousDowntimeEvents($http);
}]);
use either
ngAppModule.controller('DowntimeController', ['$scope','$http', GetPreviousDowntimeEvents]);
or return something in your GetPreviousDowntimeEvents function
function GetPreviousDowntimeEvents($http) {
//...
return self;
}
I'm having trouble accessing the nested JSON using the ng-repeat directives. I know it is working because the not nested part of the JSON object is displaying.
Here is a plunker of my code: http://plnkr.co/edit/V2iURMa8t7vG9AqDFMOf?p=preview
JavaScript:
var app = angular.module("app", [ ]);
app.controller("AppTest", function($scope){
$scope.currentInfo=[{"id":0,"article":"JavaScript Conquers the World","publisher":"Daily Times","meta_data":{"comments":4}},
{"id":1,"article":"The Problem with Foobar","publisher":"New York Times","meta_data":{"comments":27}}];
$scope.tableInfo=[{"name":"id","dataType":"Integer","isEditable":false},
{"name":"article","dataType":"String","isEditable":true},
{"name":"publisher","dataType":"String","isEditable":false},
{"name":"meta_data.comments","dataType":"Integer","isEditable":false}];
});
HTML:
<body ng-app="app" ng-controller="AppTest as app"
<table>
<tbody ng-repeat="anotherItem in currentInfo">
<tr>
<td ng-repeat="item in tableInfo">{{anotherItem[item.name]}}</td>
</tr>
</tbody>
</table>
</body>
Another solution that is better is to add function in the controller that will resolve the value for you. The issue with your solution is that you need Angular to resolve meta_data.comments, but it is treating it as the string that is used in the array lookup since it has already resolved item.name.
$scope.resolveLookup = function(object, lookup) {
var depth = lookup.split('.').length;
var currentObj = object;
for(var x=0; x<depth; x++) {
currentObj = currentObj[lookup.split('.')[x]];
}
return currentObj;
};
Then change the HTML to look like:
<td ng-repeat="item in tableInfo">{{resolveLookup(anotherItem,item.name)}}</td>
Here is the Plunker: http://plnkr.co/edit/RVd2ncwstyQtCtdhcC9U?p=preview
The issue is that it is putting 'metadata.comments' in the [] and it doesn't realize that it needs to be resolved again by angular. I can't think of fix without changing the data structure of your 'tableInfo' object.
Here is how I would do it.
Change table info to:
$scope.tableInfo = [{
"name": ["id"],
"dataType": "Integer",
"isEditable": false
}, {
"name": ["article"],
"dataType": "String",
"isEditable": true
}, {
"name": ["publisher"],
"dataType": "String",
"isEditable": false
}, {
"name": ["meta_data", "comments"],
"dataType": "Integer",
"isEditable": false
}];
Change your HTML to:
<td ng-repeat="item in tableInfo" ng-if="item.name.length==1">{{anotherItem[item.name[0]]}}</td>
<td ng-repeat="item in tableInfo" ng-if="item.name.length==2">{{anotherItem[item.name[0]][item.name[1]]}}</td>
Here is the Plunker: http://plnkr.co/edit/q9lHZ2TD7WZ74b2f6Ais?p=preview
[
{
"id": "1",
"titlu": "client1",
"subtitlu": "client1",
"continut": "client1 is ...",
"bigimage": "images/client1.jpg",
"smallimage1": "images/client1.jpg",
"smallimage2": "images/client1.jpg",
"smallimage3": "images/client1.jpg",
"smallimage4": "images/client1.jpg"
},
{
"id": "2",
"titlu": "client2",
"subtitlu": "client2",
"continut": "client2 is ...",
"bigimage": "images/client2.jpg",
"smallimage1": "images/client2.jpg",
"smallimage2": "images/client2.jpg",
"smallimage3": "images/client2.jpg",
"smallimage4": "images/client2.jpg"
},
{
"id": "3",
"titlu": "client3",
"subtitlu": "client3",
"continut": "client3 is ...",
"bigimage": "images/client3.jpg",
"smallimage1": "images/client3.jpg",
"smallimage2": "images/client3.jpg",
"smallimage3": "images/client3.jpg",
"smallimage4": "images/client3.jpg"
}
]
This is my client.json, I want to load the page at a time, each index of json. Something like PREV button, and will load previous id from json on my page. Can someone give me a link or something to help me.
Controller.js
animateApp.controller('projectsController', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http){
$http.get('res/json/client.json').success(function(data){
$scope.projects = data;
$scope.currentProject = 1;
});
Try this link which has data and you can bind them with your control.
JSON Link
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});