Develop Reference

how to create complex table from json using angular 6?

I am trying to create table from the given json. here is json Structure. i am using simple html table to make table structure same like mentioned in below snapshot.as data's are dynamic table structure is not displaying proper in my case.
{
"e_id": "1234",
"e_o_name": "Contact_info",
"matching_details": [
{
"me_value": "value1",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "28 sai",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "a#gmail"
},
{
"me_value": "b#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "29 meena",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "c#gmail.com"
},
{
"me_value": ",d#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
{
"me_value": "value2",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "rimzim",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "p#gmail"
},
{
"me_value": "q#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "ranu",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "t#gmail.com"
},
{
"me_value": ",u#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
]}
above structure is the actual output.I tried creating the same but for
me data's are coming in single row.
enter code here<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr>
<td rowspan="4">data.e_o_name</td>
<td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
<td>28 sai</td>
<th>a#gmail,b#gmail</th>
<td>100</td>
</tr>
</tbody>
Help for the same is highly appriciated... Thanks in advance

I would prepare proper table rows structure in order to render this complex table.
component.ts(or service.ts)
rows = [];
generateTable() {
if (!this.data) {
return;
}
this.rows.push([
{
text: this.data.e_o_name,
rowspan: 0
}
]);
let maxRowSpan = 0;
this.data.matching_details.forEach((detail, i) => {
const elemRowSpan = Math.max(detail.matching_attributes.length, 1);
maxRowSpan += elemRowSpan;
if (i > 0) {
this.rows.push([])
}
this.rows[this.rows.length - 1].push({
text: detail.me_value,
rowspan: elemRowSpan
});
detail.matching_attributes.forEach((attr, j) => {
if (j > 0) {
this.rows.push([])
}
const mail = attr.me_list[0];
this.rows[this.rows.length - 1].push(
{
text: attr.me_name,
rowspan: 1
},
{
text: mail.me_email_list.map(({ me_value }) => me_value).join(', '),
rowspan: 1
},
{
text: mail.me_percent,
rowspan: 1
}
);
})
});
this.rows[0][0].rowspan = maxRowSpan;
}
template.html
<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr *ngFor="let row of rows">
<td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
</tr>
</tbody>
</table>
Ng-run Example

vuetify v-data-table not showing nested object data

I have v-datatable using vuetify I want to get nested data to be displayed unfortunately I can't get the nested object value this is my code
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.name)">
<td
class="text-xs-right"
>{{ props.item.firstName + props.item.middleName + props.item.lastName}}</td>
<td class="text-xs-right">{{ props.item.gender }}</td>
<td class="text-xs-right">{{ props.item.dateOfBirth }}</td>
<td class="text-xs-right">{{ props.item }}</td>
</tr>
</template>
and this is the header
headers: [
{
text: "MCN",
align: "left",
sortable: false,
value: "medicalRecordNumber",
width: "16%"
},
{ text: "Full Name", value: "fullName", width: "16%" },
{ text: "Gender", value: "gender", width: "16%" },
{ text: "Date Of Birth", value: "dateOfBirth", width: "16%" },
{ text: "Phone Number", value: "address", width: "16%" },
{ text: "Actions", value: "action", sortable: false }
],
and my data
{
"medicalRecordNumber": "dsUlBnusoH",
"fullName": "Rozella SchusterProf. Chloe Hauck DDSAthena Hill III",
"firstName": "Rozella Schuster",
"middleName": "Prof. Chloe Hauck DDS",
"lastName": "Athena Hill III",
"gender": "Female",
"dateOfBirth": "2018-04-18",
"language": "Tigregna",
"religion": "Catholic",
"address": {
"region": "Addis Ababa",
"woreda": "bole",
"kebele": "10",
"houseNumber": "35698",
"telPhoneNumber": null,
"mobilePhoneNumber": null
},
"emergencyContact": {
"firstName": "Krista Collins III",
"middleName": "Onie Roob",
"lastName": "Dr. Vivien Miller PhD",
"emergencyContactAddress": null
}
}
i got the values but not the nested one it displays [object Object]

replace
{ text: "Phone Number", value: "address", width: "16%" },
to
{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },

#Ktertz You just need to create a custom v-solt template with a v-for loop for every object.
Upadate: #Ktertz deleted his question, I will leave my answer here, maybe it will help someone else.
His question was related to nested objects.
It was just displaying [object Object] (Same as OP Question).
He had a list of objects like:
engines: [
{
id: 1,
name: "V8",
modules: [
{
id: 1,
moduleName: "Comp"
},
{
id: 2,
moduleName: "Enip"
},
]
}
]
My working solution was to just create a custom v-solt template with a v-for loop for every object:
headers:
{
sortable:true,
text:'Modules Formation',
value:'modules',
align:'right'
},
Now place this snipped inside your v-data-table:
<template v-slot:[`item.modules`]="{ item }">
<div v-for="module in item.modules" :key="module.id">
{{ module.moduleName }}
</div>
</template>

AngularJS Table creation not working properly

2021 EDIT:
Disclaimer, this question was written when I was brand new to both HTML and JS. If you are here looking for help for an issue, this may not be helpful as my code was pretty much a mess. Apologies for the inconvenience. The question will stay up as per site guidelines.
ORIGINAL POST
I am attempting to use create a table using angularJS which draws information from a js list of cars to present them in a table. Per the specifications this must be done using Angular, despite the easier ways existing.
My current issue, is that instead of outputting the information, each column displays the formatting code ({{ car.Model }} , for example).
My current code is as follows:
<body ng-app="">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click = "sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="roll in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="cars.js"></script>
</body>
</html>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default search/filter term
//BUTTON
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener ("click", incrementStock(0));
// create the list of cars
$scope.cars = [
{ Manufacturer: cars[0].Manufacturer, Model: cars[0].Model, Year: cars[0].Year , Stock: cars[0].Stock , Price: cars[0].Stock , Option: button},
{ Manufacturer: cars[1].Manufacturer, Model: cars[1].Model, Year: cars[1].Year , Stock: cars[1].Stock , Price: cars[1].Stock , Option: button},
{ Manufacturer: cars[2].Manufacturer, Model: cars[2].Model, Year: cars[2].Year , Stock: cars[2].Stock , Price: cars[2].Stock , Option: button},
{ Manufacturer: cars[3].Manufacturer, Model: cars[3].Model, Year: cars[3].Year , Stock: cars[3].Stock , Price: cars[3].Stock , Option: button},
{ Manufacturer: cars[4].Manufacturer, Model: cars[4].Model, Year: cars[4].Year , Stock: cars[4].Stock , Price: cars[4].Stock , Option: button},
{ Manufacturer: cars[5].Manufacturer, Model: cars[5].Model, Year: cars[5].Year , Stock: cars[5].Stock , Price: cars[5].Stock , Option: button},
{ Manufacturer: cars[6].Manufacturer, Model: cars[6].Model, Year: cars[6].Year , Stock: cars[6].Stock , Price: cars[6].Stock , Option: button},
{ Manufacturer: cars[7].Manufacturer, Model: cars[7].Model, Year: cars[7].Year , Stock: cars[7].Stock , Price: cars[7].Stock , Option: button},
{ Manufacturer: cars[8].Manufacturer, Model: cars[8].Model, Year: cars[8].Year , Stock: cars[8].Stock , Price: cars[8].Stock , Option: button},
{ Manufacturer: cars[9].Manufacturer, Model: cars[9].Model, Year: cars[9].Year , Stock: cars[9].Stock , Price: cars[9].Stock , Option: button}
];
});
function incrementStock(number){
alert("function called");
}
With cars.js being as follows:
var cars = [
{"manufacturer":"Toyota",
"model":"Rav4",
"year":2008,
"stock":3,
"price":8500},
{"manufacturer":"Toyota",
"model":"Camry",
"year":2009,
"stock":2,
"price":6500},
{"manufacturer":"Toyota",
"model":"Tacoma",
"year":2016,
"stock":1,
"price":22000},
{"manufacturer":"BMW",
"model":"i3",
"year":2012,
"stock":5,
"price":12000},
{"manufacturer":"Chevy",
"model":"Malibu",
"year":2015,
"stock":2,
"price":10000},
{"manufacturer":"Honda",
"model":"Accord",
"year":2013,
"stock":1,
"price":9000},
{"manufacturer":"Hyundai",
"model":"Elantra",
"year":2013,
"stock":2,
"price":7000},
{"manufacturer":"Chevy",
"model":"Cruze",
"year":2012,
"stock":2,
"price":5500},
{"manufacturer":"Dodge",
"model":"Charger",
"year":2013,
"stock":2,
"price":16000},
{"manufacturer":"Ford",
"model":"Mustang",
"year":2009,
"stock":1,
"price":8000},
]

You are iterating "roll in cars" but instead using "car" while printing it. Replace it as (ng-repeat = "roll in cars" to ng-repeat = "car in cars"). In original var cars collection you have used small names for property and while assigning it to $scope.cars you are writing initial letter of property in capital (e.g. "Manufacturer: cars[0].Manufacturer" it should be "Manufacturer: cars[0].manufacturer"). Additionally I have refactored your code to iterate cars in loop and push it to $scope.cars.
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'price'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchCar = ''; // set the default
var button = document.createElement("button");
button.innerHTML = "increment";
button.addEventListener("click", incrementStock(0));
var cars = [{
"manufacturer": "Toyota",
"model": "Rav4",
"year": 2008,
"stock": 3,
"price": 8500
},
{
"manufacturer": "Toyota",
"model": "Camry",
"year": 2009,
"stock": 2,
"price": 6500
},
{
"manufacturer": "Toyota",
"model": "Tacoma",
"year": 2016,
"stock": 1,
"price": 22000
},
{
"manufacturer": "BMW",
"model": "i3",
"year": 2012,
"stock": 5,
"price": 12000
},
{
"manufacturer": "Chevy",
"model": "Malibu",
"year": 2015,
"stock": 2,
"price": 10000
},
{
"manufacturer": "Honda",
"model": "Accord",
"year": 2013,
"stock": 1,
"price": 9000
},
{
"manufacturer": "Hyundai",
"model": "Elantra",
"year": 2013,
"stock": 2,
"price": 7000
},
{
"manufacturer": "Chevy",
"model": "Cruze",
"year": 2012,
"stock": 2,
"price": 5500
},
{
"manufacturer": "Dodge",
"model": "Charger",
"year": 2013,
"stock": 2,
"price": 16000
},
{
"manufacturer": "Ford",
"model": "Mustang",
"year": 2009,
"stock": 1,
"price": 8000
},
];
// create the list of cars
$scope.cars = [];
for (var i = 0; i < cars.length; i++) {
var carObj = {
Manufacturer: cars[i].manufacturer,
Model: cars[i].model,
Year: cars[i].year,
Stock: cars[i].stock,
Price: cars[i].price,
Option: button
}
$scope.cars.push(carObj);
}
});
function incrementStock(number) {
alert("function called");
}
body{background-color: #95b8cf;}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 3px solid #000000;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="sortApp">
<h2>CARS IN THE LOT:</h2>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Manufacturer
</td>
<td>
Model
</td>
<td>
<a href="#" ng-click="sortReverse = !sortReverse">
Year
<span ng-show = "!sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
Stock
</td>
<td>
Price
</a>
</td>
<td>
Option
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars | orderBy:sortType:sortReverse | filter:searchCar">
<td>{{ car.Manufacturer }}</td>
<td>{{ car.Model }}</td>
<td>{{ car.Year }}</td>
<td>{{ car.Stock }}</td>
<td>{{ car.Price }}</td>
<td>{{ car.Option }}</td>
</tr>
</tbody>
</table>
</div>
</body>

How to compare data of two jsons and display icons according to result in vue?

I have two arrays filled with JSON data: generalQuestInfo and finishedQuestleafs; object from generalQuestInfo looks like:
{
id: 1,
name: "Breaking News",
alias: "BN",
globalId: 1,
platform: "Win64",
pathway: {
status: "Robot",
name: "start case",
leafs: ["start", "teleport", "take photo", "kill", "finish"]
}
}
finishedQuestleafs looks like:
[
{
name: "start",
questId: 1
},
{
name: "teleport",
questId: 1
},
{
name: "take photo",
questId: 1
},
{
name: "kill",
questId: 1
},
{
name: "finish",
questId: 1
},
{
name: "start",
questId: 2
}
]
Where id from generalQuestInfo equals questId from finishedQuestleafs.
In Vue app I display table with data from generalQuestInfo.
But I need to compare values from generalQuestInfo pathway.leafs with finishedQuestleafs name according to ID. If pahway.leafs is in finishedQuestleafs with same ID, then I need to display fas fa-check icon, in other way - fas fa-crash.
How can I compare data in generalQuestInfo with finishedQuestleafs and display right icons? I tried to use two v-for directives, but it didn't work:(
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'BN' && isActive == 1">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'SAM' && isActive == 2">
<td>{{ data.pathway.status }}</td>
<td>{{ data.pathway.name }}</td>
<td>{{ data.pathway.leafs }}</td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
</tr>
<tr v-else-if="isActive == 3">
<td>NO INFO</td>
</tr>
</table>
data() {
return {
mainPageInfo: [],
generalQuestInfo: [],
finishedQuestleafs: [],
isActive: 0
}
},

First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.
new Vue({
el: "#app",
data() {
return {
generalQuestInfo: [{
"id": 1,
"name": "Breaking News",
"alias": "BN",
"globalId": 1,
"platform": "Win64",
"pathway": {
"status": "Robot",
"name": "start case",
"leafs": ["start", "teleport", "take photo", "kill", "finish"]
}
}],
finishedQuestleafs: [
{ name: "start", questId: 2 },
{ name: "teleport", questId: 1 },
{ name: "take photo", questId: 1 },
{ name: "kill", questId: 1 },
{ name: "finish", questId: 1 },
{ name: "start", questId: 2 }
]
}
},
methods: {
getIconClass(id, leaf) {
return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
}
}
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table align="center">
<tr>
<th>Status</th>
<th>Path name</th>
<th>Leafs Info</th>
</tr>
<tr v-for="data in generalQuestInfo" :key="data.id">
<td>{{data.pathway.status}}</td>
<td>{{data.pathway.name}}</td>
<td>
<ul>
<li v-for="(leaf, index) in data.pathway.leafs" :key="index">
<i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
</li>
</ul>
</td>
</tr>
</table>
</div>

You could try making a method to check while you're in the v-for loop.
<tr v-for="data in generalQuestInfo">
<span v-if="hasQuestFinished(data.id, data.pathway.leafs)">
<!-- display stuff if hasQuestFinished() returned true -->
</span>
</tr>
And in your vue object (assuming you only want to check if its in the array:
methods:{
hasQuestFinished(questID, givenQuests){
finishedQuestleafs.forEach(function(leaf){
if(leaf.questId == questID && givenQuests.indexOF(leaf.name) >= 0){
return true;
}
});
//finished the loop without returning means no match
return false;
}
}

How to use filter in AngularJS properly to highlight a word in all JSON?

how to use filter function properly in angularjs to highlight a word that i type in textbox and then it highlight all word in JSON that we type. I have dimensional array JSON, which is looked like this :
[
{
"id": "WEB1500001",
"tgl_opj": "2015-08-24",
"ket": "",
"tgl_jth_tempo": "2015-09-07",
"divisi": "MIYAKO ",
"soDetail":
[
{
"id": "WEB1500001",
"kd_brg": "KAS1618B ",
"harga": ​216900,
"qty": ​500,
"qty_si": ​170
},
{
"id": "WEB1500001",
"kd_brg": "KAS1627KB ",
"harga": ​257900,
"qty": ​300,
"qty_si": ​0
},
{
"id": "WEB1500001",
"kd_brg": "MCM-612 ",
"harga": ​206400,
"qty": ​400,
"qty_si": ​300
},
{
"id": "WEB1500001",
"kd_brg": "MCM-507 ",
"harga": ​228500,
"qty": ​400,
"qty_si": ​400
},
{
"id": "WEB1500001",
"kd_brg": "WD-189H ",
"harga": ​157900,
"qty": ​1050,
"qty_si": ​300
},
{
"id": "WEB1500001",
"kd_brg": "WD-290HC ",
"harga": ​303200,
"qty": ​200,
"qty_si": ​0
},
{
"id": "WEB1500001",
"kd_brg": "MCM-509 ",
"harga": ​228500,
"qty": ​200,
"qty_si": ​100
},
{
"id": "WEB1500001",
"kd_brg": "MCM-838 ",
"harga": ​243200,
"qty": ​200,
"qty_si": ​0
},
{
"id": "WEB1500001",
"kd_brg": "BL-101PL ",
"harga": ​236000,
"qty": ​240,
"qty_si": ​0
},
{
"id": "WEB1500001",
"kd_brg": "BL-151GF ",
"harga": ​298000,
"qty": ​240,
"qty_si": ​240
},
{
"id": "WEB1500001",
"kd_brg": "MCG-171 ",
"harga": ​954800,
"qty": ​50,
"qty_si": ​20
},
{
"id": "WEB1500001",
"kd_brg": "MJG-201 ",
"harga": ​870600,
"qty": ​50,
"qty_si": ​0
}
]
}
]
here is how i consume the json, this is my app.js :
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ui.bootstrap'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/Laporan_PO_OutStanding');
$stateProvider
.state('Laporan_PO_OutStanding', {
url: '/Laporan_PO_OutStanding',
templateUrl: 'pooutstanding/main',
controller : 'Hello'
})
.state('Laporan_PO_OutStanding.Laporan_PO_OutStanding_PartialDetails', {
templateUrl: 'pooutstanding/details',
});
});
app.controller('Hello', function($scope, $http, $state, $stateParams, $log) {
$("#navigationArea").hide();
$scope.isCollapsed = false;
$scope.tgl_awal = '2015-08-01';
$scope.tgl_akhir = '2015-08-31';
$scope.kd_dealer;
$scope.state = $state;
$scope.stateParams = $stateParams;
$scope.show = function show(){
$("#tbl").show(500);
$("#dateArea").show(500);
$("#navigationArea").hide(500);
}
$scope.selectPOoutStanding = function selectPOoutStanding(tgl_awal,tgl_akhir,kd_dealer){
$log.debug(tgl_awal);
$log.debug(kd_dealer);
$log.debug("hehe");
$http.get(urlLaporan + "/"+tgl_awal+"/"+tgl_akhir + "/" + kd_dealer)
.success(function(response){
$scope.listPOoutStandings = response;
});
};
});
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
and here is my index.html :
<div class="table-responsive">
<table id="tbl" class="table">
<thead>
<tr>
<th></th>
<th>No PO</th>
<th>Tanggal PO</th>
<th>Tanggal Jatuh Tempo</th>
<th>Divisi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="listPOoutStanding in listPOoutStandings | filter:search | orderBy:'id'" ng-bind-html="listPOoutStanding | highlight:search">
<td><a ui-sref=".Laporan_PO_OutStanding_PartialDetails" ng-click="selectSingleID(listPOoutStanding.id)" class="btn btn-info">Show Detail</a></td>
<td><a ng-click="isCollapsed = !isCollapsed" class="expandcollapse btn btn-mini btn-primary pull-center"><span class="glyphicon glyphicon-plus"></span> {{listPOoutStanding.id}}</a></td>
<td>{{listPOoutStanding.tgl_opj}}</td>
<td>{{listPOoutStanding.tgl_jth_tempo}}</td>
<td>{{listPOoutStanding.divisi}}</td>
</tr>
<tr ng-repeat-end="">
<td colspan="10" style="padding: 0">
<div collapse="isCollapsed">
<table class="table table-border">
<tr>
<td>No. PO</td>
<td>Kode Barang</td>
<td>Qty</td>
<td>Qty SI</td>
<td>Harga</td>
</tr>
<tr ng-repeat="details in listPOoutStanding.soDetail">
<td>{{ details.id }}</td>
<td>{{ details.kd_brg }}</td>
<td>{{ details.qty }}</td>
<td>{{ details.qty_si }}</td>
<td>{{ details.harga }}</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Here is how i do css the highlighted text, i give it yellow color :
.highlighted { background: yellow }
it won't highlited the text, it just filter the JSON data record, but it wont highlight the text, what i missed here?

filter removes data from html. Instead of it use ng-class like:
<tr ng-repeat-start="listPOoutStanding in listPOoutStandings | orderBy:'id'"
ng-class="{'highlighted': listPOoutStanding.text == search}">
<td>your tds</td>
</tr>

You have to use ng-class and write expression to return true when the row text matches the textbox input.
<tr ng-repeat="employee in employeeList" ng-class="{match:empfind.length>0 &&employee.Name.toLowerCase().indexOf(empfind.toLowerCase())>=0}">
Here is an example which will highlight the table row based on the given input.
http://dotnetlearners.com/blogs/view/242/Highlight-matched-table-rows-based-on-entered-text-in-a-textbox-using-angularjs.aspx