Angular JS ng-repeat not displaying values - angularjs

I am making an REST call from angular to Spring . I am able to get the response back .When i am trying to populate the values in the view using ng-repeat , nothing is shown on the screen .
This is my Angular Code This code is inside the showhidecontroller
var resuls = $http.post('http://localhost:8080/aeservices/AddConfig', dataobj);
resuls.success(function(data, status, headers, config) {
$scope.dbresponse= data;
$scope.messagetest = $scope.dbresponse[0].messages;
alert($scope.messagetest);
console.log( $scope.messagetest);
console.log(data);
});
This is my Response i recieved from API
[{
"data12": null,
"name": null,
"errors": ["error data1", "error data2"],
"messages": ["Configuration has been Added successfully", "Configuration has been Added successfully"]
}]
This is my HTML
<table ng-controller="ShowHideController">
<tr ng-repeat="item in dbresponse[0].errors" >
<span><td align="left" class="validationMsg"><img src="images/red_bullet.gif" border="0" width="8" height="8" alt="">&nbsp
{{item}}
</td></span></tr>
</table>
I tried using ng-repeat by declaring myself an item like this $scope.items = ['one','two','three','four']. Even this is not showing up on the HTML.

Try using data.data,
Controller:
app.controller("listController", ["$scope", "$http",
function($scope, $http) {
$http.get('test.json').then(function(response) {
$scope.dbresponse = response.data;
});
}
]);
HTML:
<table ng-controller="listController">
<tr ng-repeat="item in dbresponse[0].errors">
<td align="left" class="validationMsg"><img src="images/red_bullet.gif" border="0" width="8" height="8" alt=""> {{item}}
</td>
</tr>
</table>
DEMO

Please try this below code and don't declare variable resuls.
$http.post('http://localhost:8080/aeservices/AddConfig', dataobj).success(function(data, status, headers, config) {
$scope.dbresponse= data;
$scope.messagetest = $scope.dbresponse[0].messages;
alert($scope.messagetest);
console.log( $scope.messagetest);
console.log(data);
});

The Problem that happened was i have declared my controller twice in the HTML

Related

Angular JSON Response

Below is a json response from my API. I would like to utilize ng-repeat in my html in order to show this data back to an end-user. How do I go about in my controller de-serializing this json data.
{
"message": "Query to return servers",
"result": [
{
"meta": [
"Computer",
"SQLPort",
"Domain"
],
"rows": [
[
"MyCompterName",
"1433",
"XXXX"
]
]
}
]
}
here is the code for the app.js that get loaded into the index.html
var app = angular.module('DSCApp', ['ngRoute', 'ngResource','ui.router']);
Config
app.config(function($routeProvider){
$routeProvider
.when('/DSC', {
templateUrl: "DSC.html",
controller: 'DscController'
})
.otherwise({ redirectTo: '/' });
});
Data Factory
app.factory('dataFactory', ['$http', function($http) {
var urlBase = '/api';
var dataFactory = {};
dataFactory.getServers = function () {
return $http.get(urlBase);
};
return dataFactory;
}]);
Controller
app.controller('DscController', ['$scope', 'dataFactory',
function ($scope, dataFactory) {
$scope.status
$scope.servers;
getServers();
function getServers() {
dataFactory.getServers()
.success(function (srv) {
$scope.servers = srv;
})
.error(function (error) {
$scope.status = 'Unable to load server data: ' + error.message;
});
}
}]);
Using ng-repeat in both the table head and table body should work.
<html ng-app='app' ng-controller='DscController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table ng-if="servers" class="table table-bordered">
<thead>
<tr>
<th ng-repeat="head in servers.result[0].meta">{{head}}</th>
</tr>
</thead>
<tbody ng-repeat="r in servers.result">
<tr ng-repeat="row in r.rows">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
<p ng-if="!servers">{{status}}</p>
</div>
</div>
</body>
</html>
I've included the necessary repeats to handle the data exactly as it was presented. I assume the meta will be the same for all results.

bootstrap-table not rendering upon updating model in Angular

Hi I am not able to render table using bootstrap-table and angular. here is my code, I think I need to call bootstrap-table init method in angular ajax call. Can some one guide me on how to do this..?
angular
.module('reports')
.controller(
'ReportCtrl',
[
'$scope',
'$http',
'ngProgress',
function($scope, $http, ngProgress) {
var vm = this;
vm.mdp = {};
vm.mdp.data = [];
vm.mdp.columns = [];
$scope.submit = function() {
var report = $scope.tab;
$http.post('/reports/cmd/getData', {
report : report,
date : createdAfter
}).success(function(data) {
vm.mdp.data = data;
$.each(data[0], function(key, value){
vm.mdp.columns.push(key);
});
}).error(function(error) {
alert(error);
});
};
} ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mdp" class="panel" ng-controller="ReportCtrl as report" ng-show="panel.isSelected('mdp')">
<table data-toggle="table" data-show-columns="true" data-search="true" data-show-export="true" data-pagination="true" data-height="299">
<thead>
<tr>
<th ng-repeat="c in report.mdp.columns" data-field= {{c}} >{{ c }}</th>
</tr>
</thead>
<tr ng-repeat="r in report.mdp.data">
<td ng-repeat="c in report.mdp.columns">{{ r[c] }}</td>
</tr>
</table>
</div>
Integrating Bootstrap Table with Angular is solved here:
https://github.com/wenzhixin/bootstrap-table/issues/165
https://github.com/AkramKamal/bootstrap-table-examples/tree/master/integrate
I have some minor changes in my implementation of this solution which I will upload to Github / JSFiddle shortly. But the links above will allow you to get going.

AngularJS reuse multiple controllers to build a webapp

What I'm looking for is to learn a proper way to build a webapp. I already built some things, but I've got to a point where I need to reuse some data and with ng-controllers, it's getting harder.
I already know controllers are not the best option, so I tried to jump to directives, based on some articles I've read. But none of them has helped me.
So, let me try to describe it.
Description
I'm building a dashboard, where i have some clients (add/edit/del), projects (which invole one or more clients), agenda, configuration, financials, etc..
I've built a lot of things already, but for example:
On the home page I'm displaying a table with the last 5 clients added to the app, also a table with the last 5 projects added to the app. Then, on the clients.html page, I display the whole table, same goes for projects, on the project.html. Both with just 3-4 fields with name, tel and email. Then on the individual client page, i display the whole information about that client. Such as address, email, contacts, observations, etc. And also a list of projects he is involved.
So what I have is something like this:
app.js
myApp.controller('ClientesCtrl', function ($scope, $http, $routeParams) {
$scope.pagename = "Clientes";
$scope.get_cliente = function() { //Function - Get Cliente
$http.get("scripts/data/clientes.json")
.success( function(data) {
$scope.pagedClientes = data;
})
.error(function(data) {});
};
$scope.add_cliente = function() { //Function - Add Cliente
$scope.formprevent = true;
$http.post('scripts/php/db.php?action=add_cliente',
{
'cod': $scope.cad.cod,
[... more data ...]
}
)
.success(function (data, status, headers, config) {})
.error(function (data, status, headers, config) {});
};
});
Same goes for projects, each one with it's controller.
My folder/File organizations is very very simple (since I don't know what I can put in different files, or even how to call it back). It's something like this:
-index.html
-scripts
--js
---angular.min.js
---angular-route.min.js
--app
---app.js
-content
--home.html
--clients.html
--projects.html
The Problem
The problem starts when i need to show those data in a lot of pages.
For example in the home page, i have a list with a resume of the main data, such as total clients, total projects, and it's like this:
<div class="col-md-3" ng-controller="ClientesCtrl">
<div ng-init="get_cliente();>
<div class="label">{{pagedClientes.length || "00"}}</div>
<div class="text">clientes totais</div>
</div>
</div>
<div class="col-md-3" ng-controller="ProjectsCtrl">
<div ng-init="get_projects()">
<div class="label">{{pagedProjects.length || "00"}}</div>
<div class="text">Processos totais</div>
</div>
</div>
<div class="col-md-3">
<div>
<div class="label">00</div>
<div class="text">Processos abertos</div>
</div>
</div>
<div class="col-md-3">
<div>
<div class="label">00</div>
<div class="text">Compromissos abertos</div>
</div>
</div>
<div class="table-body" ng-controller="ClientesCtrl">
<table ng-init="get_clients()">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in pagedClients | limitTo:-5 | orderBy:'-id'" ng-if="pagedClients.length > 0">
<td>{{cliente.cod}}</td>
<td>{{cliente.nm_client}}</td>
<td>
<a class="bt-t bt-inf" href="#/detcliente/{{cliente.id}}"></a>
</td>
</tr>
<tr ng-if="pagedClientes.length == 0">
<td colspan="3"><h3>No client</h3></td>
</tr>
</tbody>
</table>
</div>
<div class="table-body" ng-controller="ProjectsCtrl">
<table ng-init="get_projects()">
<thead>
<tr>
<th>ID</th>
<th>Project</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in pagedProjects | limitTo:-5 | orderBy:'-id'" ng-if="pagedProjects.length > 0">
<td>{{project.cod}}</td>
<td>{{project.nm_cliente}}</td>
<td>
<a class="bt-t bt-inf" href="#/detproject/{{project.id}}"></a>
</td>
</tr>
<tr ng-if="pagedClientes.length == 0">
<td colspan="3"><h3>No project</h3></td>
</tr>
</tbody>
</table>
</div>
So, basically, I need to add the controller in each block I need to display that data, also I have to 'init' the function to get the data again. This is a simple example, but I think it was enough to show what I need to solve.
It's worse when I need to show the individual client, with only their projects. So before I get crazy with all of those controllers, I want to know how is the best way to put up the logic, the folder/file organization, the code organization. Is it better to use a directive? to make the directive call a controller? Call multiple controllers? Or what?
You need to use services to fetch the data: https://docs.angularjs.org/guide/services. For your code it would look something like this:
app.factory('clients', function ($http) {
var getClients = function() { //Function - Get Cliente
return $http.get("scripts/data/clientes.json")
.success( function(data) {
return data;
})
.error(function(data) {});
};
var add_cliente = function(cad) { //Function - Add Cliente
$http.post('scripts/php/db.php?action=add_cliente',
{
'cod': cad.cod,
[... more data ...]
}
)
.success(function (data, status, headers, config) {})
.error(function (data, status, headers, config) {});
};
return {
getClients: getClients,
add_cliente: add_cliente
}
})
You can then inject the service in a controller and use the functions in your controller:
app.controller('Ctrl', function (clients, $scope) {
clients.getClients().then(function (data) {
$scope.myClients = data;
});
});
Read the client data on initialization of the controller - not need to use a ng-init.
myApp.controller('ClientesCtrl', function ($scope, $http, $routeParams) {
$scope.pagename = "Clientes";
$http.get("scripts/data/clientes.json")
.success( function(data) {
$scope.pagedClientes = data;
})
.error(function(data) {});
$scope.add_cliente = function() { //Function - Add Cliente
$scope.formprevent = true;
$http.post('scripts/php/db.php?action=add_cliente',
{
'cod': $scope.cad.cod,
[... more data ...]
}
)
.success(function (data, status, headers, config) {})
.error(function (data, status, headers, config) {});
};
});
Controllers can be nested. Define the controller on a div which wraps the area where you need the client data. Same for the ProjectsController. You could even merge the 2 controllers in one.
<div ng-controller="ClientesCtrl">
<div class="col-md-3" >
<div ng-init="get_cliente();>
<div class="label">{{pagedClientes.length || "00"}}</div>
<div class="text">clientes totais</div>
</div>
</div>
....

ng-repeat parsing every character of json

Still Trying to track down why I cannot display json data from asp.net webmethod won't display in table using ng-repeat - I've gotten to the point where it looks like there is an issue with my json but I don't see the problem
The table with the server json - I added an index column and it seems to add a row per character ??
Here is a screenshot of the data - There is the json data from the server and a manually created angular collection that looks like my json data
Thanks for any insight
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="SampleAngularjs.Test1" %>
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="codeapp">
<div ng-controller="CodeController" >
<button ng-click="doClick(item, $event)">Send AJAX Request</button>
<br />
Data from server: {{codes}}
<br />
Data from Manually built Collection: {{fields}}
<br />
<h3>And here is what you get if you just return the promise returned by $http.get():</h3>
<pre>{{codes | json}}</pre>
<br />
<h3>Manually Built Angular Collection Table</h3>
<table>
<tr>
<th>Code</th>
<th>Desc</th>
</tr>
<tr ng-repeat="code in fields">
<td>{{code.Code}}</td>
<td>{{code.Desc}}</td>
</tr>
</table>
<br />
<h3>Server Json Table</h3>
<table>
<tr>
<th>Row</th>
<th>Code</th>
<th>Desc</th>
</tr>
<tr ng-repeat="code in codes track by $index">
<td>({{$index + 1}}) </td>
<td>{{code.Code}}</td>
<td>{{code.Desc}}</td>
</tr>
</table>
</div>
<script>
angular.module("codeapp", [])
.controller("CodeController", function ($scope, $http) {
$scope.fields = [{ Code: "aaa", Desc: "aaa, desc" }, { Code: "bbb", Desc: "bbb, desc" }];
$scope.codes = [];
$scope.doClick = function (item, event){
$http.post('Test1.aspx/GetAllCodes', { data: {} })
.success(function (data, status, headers, config) {
$scope.codes = data.d;
})
.error(function (data, status, headers, config) {
$scope.status = status;
});
}
})
.config(function ($httpProvider) {
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8";
});
</script>
</body>
</html>
You're getting a string from the server and ng-repeat over a string gives you each character. Try parsing it yourself to see if it works, then check out the request and response headers to see why it isn't sending the data back as application/json:
.success(function (data, status, headers, config) {
$scope.codes = JSON.parse(data.d);
})

Displaying Json Data from ng-repeat in multiple containers

Hey I have a question about using ng-repeats. I'm trying to display user data from a large json file in two separate containers. When a user clicks on a row it displays the other piece of the ng-repeat in a different section. If someone could take a look at this fiddle and maybe give me a direction to go in that would be awesome. Thanks!
I'm also using ngTable for the table params, but I don't think that has much to do with the issue.
http://jsfiddle.net/cL5aE/1/
HTML:
<body>
<div ng-controller="myController">
<div class="col-md-6">
<table>
<tr ng-repeat="user in $data" ng-click="loadDetails()">
<td>{{user.name}}</td>
<td>{{user.id}}</td>
</tr>
</table>
</div>
<div class="col-md-6">
<tr ng-repeat="user in $data" ng-show="loadDetails()">
<td>{{user.foo}}</td>
<td>{{user.bar}}</td>
</tr>
</div>
</div>
</body>
Controller:
angular.module('app', ['ngTable']);
app.controller('myController', function ($scope, $http, ngTableParams) {
$http.get('http://myjson.com/data.json')
.success(function (data, status) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
CompleteDate: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
$scope.loadDetails = function(data) {
//???
}
});
I would pass the user object as a parameter to a function and assign it a model. That way you don't need to use the ng-repeat in both sections leading to a cleaner and more readable code.
Pass the object you're displaying on the ng-repeat:
<tr ng-repeat="user in $data" ng-click="loadDetails(user)">
Function to load the object to a model property:
$scope.loadDetails = function(user) {
$scope.viewModel.selectedUser = user;
}
And finally assign the model property to the view:
<table>
<tr ng-show="viewModel.selectedUser">
<td>{{viewModel.selectedUser.foo}}</td>
<td>{{viewModel.selectedUser.bar}}</td>
</tr>
</table>
http://jsfiddle.net/jimenezjrs/5Cd32/

Resources