How can I pass array Json data from angularjs Controller to html.
Here is my html
<body ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
<thead>
<tr>
<th>something</th>
<th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><( item.id )></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is my Angularjs
var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<(');
$interpolateProvider.endSymbol(')>');
});
bookApp.controller('bookListCtr', function ($scope, $http) {
$http.get('http://localhost/client_side/public/book').success(function(data) {
if(data.s_respond === 200){
$scope.items = data.data;
console.log(data.data)
}
});
});
This is Json data After console
s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"
I think that you need parse the json
$scope.items = JSON.parse(data.data);
a link that explain that:
https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS
There r two tags... meaning 2 column try adding another in Ua body
<body ng-app="bookApp"> <div ng-controller="bookListCtr">
<table>
<thead>
<tr> <th>something</th> <th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items"> <td>{{item.id }}</td>
<td>something else</td>
</tr>
</tbody>
</table>
</div>
</body>
Related
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
My Object looks like this
Object
207T : Object
metal : 1
steel : 2
205T : Object
metal : 1
steel : 3
208T : Object
metal : 1
steel : 3
209T : Object
metal : 0
steel : 9
Now this object i need to display in below format
207T, 205T, 208T, 209T should be in table heading which is fine
<tr>
<th></th>
<th></th>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
And then the format should be
How to acheive this
We can not create table column wise so in this case best and cleanest way would be to filter out the row values and using them inside view. So
In controller
app.controller(['$scope', function($scope){
$scope.object= values;
$scope.valuesMetal= [];
$scope.valuessteel = [];
// initializing row values for use in the using in view
angular.forEach(values, function(value, key) {
$scope.valuesMetal.push(value.metal );
$scope.valuessteel.push(value.metal );
});
}]);
In the view we just display our values
<tr>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
<tr>
<td >Metal</td>
<td ng-repeat="(key, value) in valuesMetal" >{{value}}</td>
</tr>
<tr>
<td >steel</td>
<td ng-repeat="(key, value) in valuessteel" >{{value}}</td>
</tr>
<div>
For the header you need to convert the object to array:
// inside controller
mainObjArray = Object.keys(mainObj); // ['207T', '205T', '208T', '209T']
// header html
<tr>
<th ng-repeat="key in mainObjArray">{{key}}</th>
</tr>
And for the rest of values you can do some like:
// inside controller
mainObjValues = mainObjArray.map(function(item){
return mainObj[item];
}); // output: [{metal: 1, steel: 2}, {...}]
Then the body-table:
<tbody>
<tr ng-repeat="item in mainObjValues">
<td>{{item.metal}}</td>
<td>{{item.steel}}</td>
....
</tr>
</tbody>
angular.module("app",[])
.controller("ctrl",function($scope){
var sampleObj = {
"207T":{
"metal":1,
"steel":2
},
"205T":{
"metal":1,
"steel":3
},
"208T":{
"metal":1,
"steel":3
},
"209T":{
"metal":0,
"steel":9
}
}
$scope.metal = [];
$scope.steel= []
$scope.keys = Object.keys(sampleObj);
angular.forEach(sampleObj, function(obj) {
$scope.metal.push(obj.metal );
$scope.steel.push(obj.steel );
});
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<th ng-repeat="item in keys">{{item}}</th>
</tr>
<tr>
<td >Metal</td>
<td ng-repeat="item in metal track by $index" >{{item}}</td>
</tr>
<tr>
<td >Steel</td>
<td ng-repeat="item in steel track by $index" >{{item}}</td>
</tr>
</table>
</div>
This is actually simple.
<table>
<tr>
<th></th>
<th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>
Here you are ng repeating in th, will display 207t, 205T etc
<tr ng-repeat="item in items track by $index">
<td ng-repeat="item1 in item track by $index">{{item[$index]}}</td>
</tr>
Here you have to ng repeat tr, so that it will display metal and steel. and then each td u have to ng repeat and should display with index item[$index]
here is demo: http://codepen.io/mafeifan/pen/PzrGRE?editors=1010
table1 is working,
in table2 I wrote a directive to render the td , but not work. I don't know why.
Html：
<table>
<tbody>
<tr ng-repeat="tr in vm.getTrs() track by $index">
<form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</form-cell>
</tr>
</tbody>
</table>
JS：
App.directive('formCell', function(){
return {
replace: true,
template: '<td>td</td>'
}
});
if I change to
<table>
<tbody>
<tr ng-repeat="tr in vm.getTrs() track by $index">
<td ng-repeat="cell in vm.getCellsByRow($index+1)"><form-cell></form-cell></td>
</tr>
</tbody>
</table>
JS:
change the template to '<span>td</td>' in directive
it's working, I don't know why
You do need <th> or <td> in <tr> tags:
<html>
<body>
<table border="1">
<tr>
<td>renders</td>
<td>renders</td>
</tr>
<tr>
<div>renders outside the table</div>
<td>renders</td>
</tr>
</table>
</body>
</html>
It seems form-cell tag is not allowed inside tr tag and browser may do something wrong. Use the directive inside an attribute:
App.directive('formCell', function(){
return {
restrict: 'A', // <-- add the restriction
replace: true,
template: '<td>td</td>'
}
});
Like:
<td form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</td>
I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/
You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle
I'm starting to learn some AngularJS and am trying to determine its practicality when working along side ASP.NET MVC.
Let's say I have a view which displays beers from a repository in a table. I could output the information in two ways.
1.Using MVC's Razor Engine
Here, the model containing the beers is processed on the server and the html page rendered.
<h3>Rendered using Razor!</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
#foreach (var beer in Model)
{
<tr>
<td>#beer.Name</td>
<td>#beer.Colour</td>
<td>#beer.Tried</td>
</tr>
}
</tbody>
</table>
2.Using Angular repeat
Here, the HTML is returned straight away and angular performs a AJAX call to the controller to retrieve its model. After it has that data it outputs it into the table.
<h3>Rendered using Angular!</h3>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="beer in model">
<td>{{ beer.Name }}</td>
<td>{{ beer.Colour }}</td>
<td>{{ beer.Tried }}</td>
</tr>
</tbody>
</table>
Controller
angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.model = {};
$http.get('/Beer/GetBeers').success(function (data) {
$scope.model = data;
});
}]);
My Question
Is there a way to use the Razor engine for the initial load of the data and Angular for everything else (paging calls, searching etc.)? In other words, how do I bind existing html to a controllers model in AngularJS?
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fosters</td>
<td>Gold</td>
<td>True</td>
</tr>
<tr>
<td>Becks</td>
<td>Amber</td>
<td>False</td>
</tr>
<tr>
<td>Cobra</td>
<td>Gold</td>
<td>True</td>
</tr>
</tbody>
</table>
In your MVC Controller
public ActionResult Index()
{
var model =.....
//optional
JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
ViewBag.data = JsonConvert.SerializeObject(model, Formatting.Indented, jsonSerializerSettings);
return View()
}
In your view Index.cshtml
...
#section Scripts {
//make sure that all anular scripts are loaded before that
<script>
angular.module('BeerController').service('dataService', function () {
var data= #Html.Raw(ViewBag.data);
return {
data:data
}
});
...
</script>
}
Angular Part:
angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http','dataService', function ($scope, $http,dataService) {
// now you can get data from your dataService without extra trip to your server
$scope.model = dataService.data
....
}]);