Please help. I am new at angularjs, I want to bind json data into div as list using angularjs
Sample Data
"[{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}]"
Json Data :
const HEROES = [
{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}
];
Template :
<tr *ngFor="let hero of heroes">
<td>{{hero.T_FORM_CODE}}</td>
</tr>
do like this:
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in array">
<td>{{x.T_FORM_CODE}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}];
});
</script>
you can use ng-repeat.
you can see plunker
<div ng-repeat ="dr in data">
{{dr.column}}
</div>
Plunker
Related
Below I have added my data
[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
}]
I want to make ng-repeat but I don't want to hard code any field (name, version, description, applicationenvironment)
How can I achieve this?
MY expectation :
IN TABLE it should come like this
Your array should be an object. So your structure simplifies quite a lot. Just extract key and values from your object and loop over it for each row. Then display key and values in separate columns per row:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.table = [{
"name": "testapp",
"version": "2.0",
"description": "testapp",
"applicationenvironment": "angularjs"
}]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key, value) in table[0]">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</body>
</html>
Although I don't recommend you to have this strucuture, you can do something like this:
angular.module('app', [])
.controller('appController', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
And your HTML would be something like this:
<div ng-app="app" ng-controller="appController as vm">
<ul>
<li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
</ul>
</div>
If you still need to have the data inside an array as you've wrote in the question, you would have to iterate over both the array and the object.
Now since your data source is an array, you need to do two nested ng-repeats
let app = angular.module("table",[]);
app.controller("tableCtrl", ["$scope", function($scope){
$scope.data = [{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
},
{
"name":"testapp 2",
"version":"2.1",
"description":"testapp 2",
"applicationenvironment":"angularjs"
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="table" ng-controller="tableCtrl">
<table ng-repeat="row in data">
<tr><td>Key</td><td>Value</td></tr>
<tr ng-repeat="(key,value) in row">
<td>{{key}}</td><td>{{value}}</td>
</tr>
</table>
</div>
Now if you do this, your data structure should yield the wanted result
You need to loop twice: Once through each the entire array of objects to access each object, and then inside each object to access individual key-value pairs.
I have posted the code below:
angular.module('app', [])
.controller('Controller1', function () {
this.data = {
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"
};
});
<div ng-app="app" ng-controller="Controller1 as c1">
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="c in c1.data">
<table>
<tr ng-repeat="(key, value) in c">
<td> {{ key }} </td>
<td> {{ value }} </td>
</tr>
</table>
</tr>
</table>
</div>
i am developing a web application where am creating textboxes dynamically using the attributes from server. I am successfull in displaying the attribute values as html table inside modal. I need to create json object using the attributes in controller and make two way binding using angularjs. I am very new to angularjs.I need a json using the key and values like
{"NAME": "",
"TYPE: "forest"} and make two way binding for this dynamically created textboxes.
<tr ng-repeat="(key, value) in prop['properties']">
<td ><label>{{ key}}</label></td>
<td><input type="text" ng-value="value"></td>
</tr>
Just put ng-model in your input text element and bind the value to it
html
<table>
<tr ng-repeat="(key,value) in prop">
<td ><label>{{key}}</label></td>
<td><input type="text" ng-model="prop[key]"></td>
</tr>
</table>
<div>
{{prop | json}}
</div>
in controller
$scope.prop = {"NAME": "", "TYPE": "forest"} ;
demo codepen
Use ng-modal for two way binding.
HTML:
<div ng-repeat="item in items">
<input ng-model="item.value" type="text" size="40">
</div>
JavaScript:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{value:'First Item'},
{value: 'Second Item'}
];
$scope.addInputItem = function() {
$scope.items.push({value:''});
};
});
Working code here: http://plnkr.co/edit/KIR7AyoF553STjOx
<div ng-app="myApp" ng-controller="controller">
Name: <input ng-model="details.name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('controller', function($scope) {
$scope.details = {};
$scope.details.name = "John Doe";
});
</script>
This might i think you were asking for
I am beginning level in angularJS. Now i am trying to populate a table records into my input fields when table row click event(). How to make this any suggestions please.
Thanks in advance.:-)
Note: I didn't using any json data for showing records into table.
Try using events. Here is a simple demo of how you can select a clicked element from a table:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.select = function(e) {
$scope.selected = e.toElement.innerText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-click="select($event)">
<tr>
<td>aaa1</td>
<td>bbb1</td>
</tr>
<tr>
<td>AAA2</td>
<td>BBB2</td>
</tr>
</table>
Selected <input ng-model="selected" />
</div>
you may use follow the workflow
<table>
<tr ng-repeat="item in recordsArr track by $index">
<td ng-click="doCallFunction( $index)"> {{item.id}}</td> <td> {{item.name}}</td>
</tr>
</table>
// just think of your records
post if any other info required
I have a table and I need to display values in table from my JSON response. But I am unable to fetch the datas inside array.somewhere I am missing something.
JSON:
var jobs = [
{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},
{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}
]
HTML:
<tr ng-repeat ="item in jobs">
<td>{{item.jobs.title}}</td>
<td>{{item.jobs.description}}</td>
</tr>
You need to use $scope:
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Hope it helps =)
There are two issues,
(i)You need to use $scope variable
(ii)You need to access item.title not item.jobs.title inside ng-repeat
You should access item
<tr ng-repeat="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
DEMO
The jobs array needs to be in $scope.
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Keep these things in mind while playing with ng-repeat :
You have to use $scope.jobs object instead of var jobs as an array declaration in the controller which you are going to pass in ng-repeat for binding.
When you are going to iterate the array inside ng-repeat="item in jobs" no need to use again jobs to access the property of the objects(item) of an array(jobs).
Working Demo :
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.jobs = [
{
"id":1,
"title":"Need comedian",
"company":"AMS",
"description":"Need comedian"
},
{
"id":2,
"title":"Need Actor",
"company":"ERS",
"description":"Actor for Romantic Movie"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
</table>
</div>
I am new to angularjs and trying to work with ng-repeat but somehow ng-repeat's key/value is not visible if I am trying to print it in nested tags
working:
<div>
<table>
<tr ng-repeat="prop in array">
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
And below code is not working:-
<div ng-repeat="prop in array">
<table>
<tr>
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
Updated:
var $app = angular.module('apps', ['ngSanitize']);
$app.controller('cntr', ['$scope', function($scope) {
$scope.guestList = [{
dob: '12/12/12'
}];
}]);
For html to show properly in angular js you have to 'sanitize' it, using the $sce provider from AngularJS. Read here: https://docs.angularjs.org/api/ng/service/$sce
In principle, before you bind your variable to html output, you have to sanitize it like this:
$scope.guest.sanitizedInput = $sce.trustAsHtml($scope.guest.res_addr1);
and html:
<td class="table-column-value res-addr1-value"><span ng-bind-html="guest.sanitizedInput"></span>