AngularJS dynamic row generation with HTML formatting - javascript

I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetail.method}}
</td>
<td>{{styleRowDetail.lineRange}}
</td>
<td>{{styleRowDetail.details}}
</td>
</tr>

here's a working code.
var jsondata = [{
"shortMessage": "data 1",
"classOriginated": "data 2",
"method": "<i>data 3</i>",
"lineRange": "data 4",
"details": "<b>data 5</b>"
}];
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
$scope.styleRowDetails = jsondata;
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td ng-bind-html="styleRowDetail.shortMessage">
</td>
<td ng-bind-html="styleRowDetail.classOriginated">
</td>
<td ng-bind-html="styleRowDetail.method">
</td>
<td ng-bind-html="styleRowDetail.lineRange">
</td>
<td ng-bind-html="styleRowDetail.details">
</td>
</tr>
</table>
</div>
Hope it helps :)

Simple Example to generate multiple row using ng-repeat Directive in AngularJS.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<table>
<tr ng-repeat="i in styleRowDetails">
<td>{{i.val}}</td>
</tr>
</table>
</div>
JS
var myApp = angular.module('myApp', [])
myApp.controller('appCtrl', ['$scope', function($scope) {
$scope.styleRowDetails = [{
val: 'welcome'
}, {
val: 'hello'
},{
val: 'world'
}
];
}]);
Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/

You should try ng-bind-html
<td ng-bind-html="styleRowDetail.details"></td>
For a better understanding visit the documentation of ng-bind-html by angularjs

Related

Ng-Repeat and ng-table issue

I'm new to Angular JS. The below Code is not working. I have tried with data table with Ng-Repeat. But It just showing the table without any sorting, pagination option.
Response Data looks like:
[{
\"ACCOUNT_LOCAL\":\"9007\",\"COMPANY_ID\":\"10001\",
\"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9008\",
\"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
\"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
\"ACTIVE\":true
},
{
\"ACCOUNT_LOCAL\":\"9008\",\"COMPANY_ID\":\"10001\",
\"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"9009\",
\"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
\"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
\"ACTIVE\":true
},{
\"ACCOUNT_LOCAL\":\"9014\",\"COMPANY_ID\":\"10001\",
\"ACCOUNT_GLOBAL\":\"100001\",\"IC_PARTNER\":\"TEST\",
\"ACCOUNT_GLOBAL_DESC\":\"AUS GLOBAL\",
\"ACCOUNT_TYPE\":\"1\",\"COMPANY_DESC\":\"THIRDROCK\",
\"ACTIVE\":true
},
HTML file
<div ng-app="myApp" ng-controller="AccountMappingCtrl as vm">
<table ng-table="vm.tableParams" show-filter="true" class="table">
<tr ng-repeat="accountMap in $data">
<td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'">
{{ accountMap.IC_PARTNER }}
</td>
<td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'">
{ accountMap.ACCOUNT_GLOBAL }}
</td>
</tr>
</table>
</div>
JS File:
var app = angular.module('myApp', [ 'ngTable']);
app.controller('AccountMappingCtrl', ['$scope', '$http','$cookies', 'NgTableParams', function($scope, $http, $filter, NgTableParams) {
$http.get("http://localhost:52087/api/accountmapping")
.then(function(response) {
var convertJson = angular.fromJson(response.data);
var self = this;
var data = convertJson;
self.tableParams = new NgTableParams({}, { dataset: data});
});
});
var myApp = angular.module('myApp',["ngTable"]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl',function($scope,NgTableParams){
$scope.name = 'Superhero';
var data = [{
"ACCOUNT_LOCAL":"9007","COMPANY_ID":"10001",
"ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9008",
"ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
"ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
"ACTIVE":true
},
{
"ACCOUNT_LOCAL":"9008","COMPANY_ID":"10001",
"ACCOUNT_GLOBAL":"100001","IC_PARTNER":"9009",
"ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
"ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
"ACTIVE":true
},{
"ACCOUNT_LOCAL":"9014","COMPANY_ID":"10001",
"ACCOUNT_GLOBAL":"100001","IC_PARTNER":"TEST",
"ACCOUNT_GLOBAL_DESC":"AUS GLOBAL",
"ACCOUNT_TYPE":"1","COMPANY_DESC":"THIRDROCK",
"ACTIVE":true
}]
//your HTTP call here
$scope.tableParams = new NgTableParams({}, { dataset: data});
})
<div ng-app="myApp" ng-controller="MyCtrl">
Hello, {{name}}!
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="accountMap in $data">
<td title="'IC_PARTNER'" filter="{ IC_PARTNER: 'text'}" sortable="'IC_PARTNER'">
{{ accountMap.IC_PARTNER }}
</td>
<td title="'ACCOUNT_GLOBAL'" filter="{ ACCOUNT_GLOBAL: 'text'}" sortable="'ACCOUNT_GLOBAL'">
{{ accountMap.ACCOUNT_GLOBAL }}
</td>
</tr>
</table>
</div>
<link rel="stylesheet"; href="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
There is type in your code { accountMap.ACCOUNT_GLOBAL }} should be {{ accountMap.ACCOUNT_GLOBAL }}
I have made fiddle of your test data. Please check this fiddle and it is working fine.

$values not printing in ng-repeat which avilable in map in angularjs

I have map which is having key and vaule has values startes with $. And i am displaying these things in table using ng-repeate. But values which start with $ not printing in table.
I have sharing code, can some please let me know how can i achive this
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
outside of map:------- {{name1}} --------printing ok
<br> <br>
<table >
<tr>
<td width="15%" class="greyTdHeads tdPad">Field Name</td>
<td width="14%" class="greyTdHeads tdPad">Field Value</td>
</tr>
<tr ng-repeat="(key,value) in params">
<td class="whiteTd tdPad">{{key}}</td>
<td ><input
Type="text"
ng-model="params[key]"></input></td>
</tr>
</table>
inside of map , not able to print
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.name1 = "$top";
$scope.params=
{without$:"without$val","$with$":" ",$batchsize:" ",$expand:" ",$filter:" ",$orderby:" ",$select:" ",$skip:" ",$top:" "}
});
</script>
</body>
</html>
Angular ignore variables starting with '$' because he uses some variables with this standard like for example $$hashkey
it applys to angular.equals, {{}}, ng-bind
you can create a new directive and read those values but i dont recommend it
have a good day.

How can I change the innerHTML of div with a variable, inside the scope function in angular js?

I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}
You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>
Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}

How can I use ng-repeat and filter to get JSON data

For the JSON below, if I want to get value of name for every object, how should I do it? {{x}} shows both value of name and type, but {{x.name}} or {{x.type}} doesn't work.
Also, If I use {{x}} to display name and type, how do I set a filter which can search value of name, but show the whole line, for example, I type A, then shows 'A file'.
JSON:
$scope.test = [{"name":"A","type":"file"},{"name":"B","type":"folder"},{"name":"C","type":"folder"}]
Html:
<input type="text" ng-model="searchtext">
<table>
<tr>
<th>NAME</th>
<th>TYPE</th>
</tr>
<tr ng-repeat="t in test">
<td ng-repeat="x in t | filter: searchtext">
{{x}}
</td>
</tr>
</table>
I dont know what searchtext is like, but I think this may give an idea:
<tr ng-repeat="x in test|filter:searchtext">
<td>
<span ng-bind="x.name"></span>
<span ng-bind="x.type"></span>
</td>
</tr>
You may also try this code. However, I have added a div element instead of a table.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="t">
<p><input type="text" ng-model="searchtext" /></p>
<div ng-repeat="x in data | filter:searchtext">
<div> {{ x.name + ' ' + x.type }} </div>
</div>
</div>
</body>
<script>
var myApp = angular.module('app', []);
myApp.controller('t', function ($scope) {
$scope.data = [{ "name": "A", "type": "file" }, { "name": "B", "type": "folder" }, { "name": "C", "type": "folder"}];
});
</script>
</html>
<tr ng-repeat="t in test">
<td ng-repeat="(key,value) in t | filter: searchtext">
{{value}}
</td>
</tr>

passing parameter from html to javascript in Angular

I have a javascript function to which I should pass a parameter.This parameter should be retrieved from html like this
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
my function is accounts.findAllAccountsByRestaurant() and the parameter is restaurant, which is retrieved from ng-repeat.How can I pass this parameter to the function?Thanks in advance.
try like this
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="product in products">
<td ng-init="Y(product)">{{product}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.products=[11,22,33];
$scope.Y= function(ar)
{
alert(ar);
};
});
</script>
</body>
If you've defined your scope correctly, everything should work as it is:
http://jsfiddle.net/jpwup7Lb/5/
$scope.accounts={
selectedRestaurants:
["one","two","three"],
findAllAccountsByRestaurant:function(restaraunt){
return "here's all accounts for "+restaraunt;
}
}
try doing this:
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
Then in your controller
$scope.accounts.findAllAccountsByRestaurant = function(restaurant) { return alert(restaurant); };

Categories