Develop Reference

Display object inside of array inside Angular

I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>

So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>

Highlight a row if it contains a specific item with Angularjs

I want to highlight the row of a table if this table contains an element that is in a global variable.
Here is a fiddle : http://jsfiddle.net/L60L3gv9/
So
var myVar = "SWITZERLAND"
is the global variable I'm looking in the table.
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
And if the table contains it, I want to highlight the row.
Any advices ?

Here is a possible solution:
HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th> {{myVar}}
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
</tr>
</table>
CSS:
.red-background {
background-color: red;
}
JS:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myVar = "Switzerland"
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {
$scope.names = response.data.records;
});
});
Note that the server returns countries in lowercase.
Here is a jsfiddle

First, define a class which highlight the row:
tr.highlight {
background-color:#123456;
}
Then you should define a constant and inject it into the controller:
var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is
var app = angular.module('myApp', []);
app
.constant('myVar', myVar)
.controller('customersCtrl', function($filter, $scope, $http, myVar) {
$scope.myVar = myVar;
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.names = response.data.records.map(function(item) {
item.Country = $filter('uppercase')(item.Country);
return item;
});
});
});
Last, use the directive ng-class in the view:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>

<tr>
<th>Sr. No.</th>
<th>Menu Name</th>
<th>Child Menu</th>
</tr>
<tr ng-repeat="menus in menuList" >
<td >{{$index+1}}</td>
<td >{{menus.menu}}</td>
<td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
<a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
</td>
<td ng-if="!menus.menu_items"></td>
</tr>
</tbody>
I have understand clearly u r question ,if any row have any any child data or rows need to highlight image or any one.
Here i used image by using boostrap
This is working perfectly check once

angularJs : how to load table data after clicking a button?

Hello Everyone im sorry if my question is being so long this is my first question in Stack over flow :) ; i'm new to angularJs so im facing this problem
i was trying to make a a button that load json data that i retrieve by http.get function to a table with ng-repeat
and i wanted to make the data be loaded after i click a button
Angular:
app.controller('dayRecord', function ($scope, $http) {
var date = dateToString("dailyData")
,http;
$scope.headers = ["company", "ticker", "ccy", "last", "close", "chg", "bid", "ask", "trades", "volume", "turnover"];
//LoadDate : function to load StockRecords for a given day
$scope.loadData = function () {
http = "http://localhost:63342/nasdak/app/data?date=";//the REST service Server to fetch the day stock recrod json data
http += date; //
$http.get(http)
.success(function (response) {
console.log(response);
$scope.first = response.balticMainList;
$scope.columnSort = {sortColumn: 'turnover', reverse: true};
});
}
$scope.loadData();
});
as you see here there is :
dayRecord Controller
loadData function that gets the json data
and here is the html code for the table im trying to load
HTML
<div ng-controller="dayRecord" style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer" ng-controller="dayRecord">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
when i call the function inside the controller everything works fine
app.controller('dayRecord', function ($scope, $http) {
...
$scope.loadData = function () {
...
}
$scope.loadData();
});
but when i click the button to load the data dynamically i cannot load it i even checked the response with console.log(response) it shows that http.get is retrieving the data but it's not refreshing it on the table

Hmm maybe the issue is that you are assigning 2 pieces of html to the same controller. What about wrapping the whole html into 1 div element and put ng-controller there like below:
<div ng-controller="dayRecord">
<div style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
</div>

Angular might need some help in changing the DOM. Try to add $scope.$apply() to the end of your load data function and see what happens on the console.

AngularJS ng-click change color within ng-repeat

I have some code that lists out items in a table from a database. The click function toggles the cells between green and red
<div class="row">
<div class="logs-table col-xs-12">
<table class="table table-bordered table-hover" style="width:100%">
<tr>
<th>Name</th>
<th>Seed</th>
<th>Division</th>
</tr>
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !started}" ng-click="inc()">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
</table>
</div>
</div>
My click function is below
$scope.inc = function () { $scope.started = !$scope.started }
The only problem is that this is changing all of the cells in the first column. I'm thinking i need to pass a parameter in my click function, but I'm not sure what.

If you don't use the started value in your controller, you don't really need to define a function.
You could use ng-init to initialize an array keeping track of the started value for each team.
Something like this:
<tr ng-repeat="team in Pool" ng-init="started = []">
<td ng-class="{'btn-danger': started[$index], 'btn-success': !started[$index]}" ng-click="started[$index] = !started[$index]">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
Somehow cleaner would be if there was a started property on every team instance:
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': team.started, 'btn-success': !team.started}" ng-click="team.started = !team.started">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>

Yes, passing a parameter into your function will help. Currently you have a $scope level variable ($scope.started) which selects your css ng-class. You probably want a team-by-team property. To do this, you should refer to the actual team object from within your ng-repeat.
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !team.started}" ng-click="inc(team)">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
And in your javascript:
$scope.inc = function (team) { team.started = !team.started; }
Now that your are using the actual individual object (team) from your ng-repeat, everything should work fine.

appending content in angular.js

I have a table which I populate with data and I want to insert other rows to that table, under the element that was clicked dynamically. I have an array of json objects called rows and when I click on a row it should fetch an array of json objects called campaigns.
This is my html:
<tbody>
<tr ng-repeat="row in rows">
<td>
{{ row.name }}
</td>
<td>{{ row.clicks }}</td>
</tr>
<script type="text/ng-template" id="clicked">
<tr ng-repeat="campaign in campaigns">
<td>
{{ campaign.name}}
</td>
<td>{{ campaign.clicks }}</td>
</tr>
</script>
</tbody>
This is my function:
$scope.toggleCollapse = function(id) {
var campaignId = id;
if (campaignId === $scope.selectedRow) {
$scope.selectedRow = null;
} else {
$scope.selectedRow = campaignId;
$scope.ads.push({
"id" : 1,
"name" : "TestName",
"clicks" : 400
})
// append template here
}
};

You don't need a seperate template, just put your straight in. If there is nothing in campaigns array, there will be 0 campaign s.