Develop Reference

How do I take variables in javascript?

I made an AJAX request so that when I select drop down the results will be out. I am confused. The problem is that only a table is displayed. How come the data comes from the variable $grade (calculation of grade), the variable $value (calculation of total value)?
I try to get the element. $grade instead it is undefined
<script type="text/javascript">
$(document).ready(function(){
$('#kategori').on('change', function(e){
var id = e.target.value;
$.get('/khs/khs_semester/' + id, function(data){
console.log(id);
console.log(data);
$('#khs').empty();
$.each(data, function(index, element){
$('#khs').append("<tr><td>" + element.kode_mk + "</td><td>" + element.nama_mk + "</td>" + "<td>" + element.semester + "</td><td>" + element.jml_sks + "</td><td>" + element.$grade + "</td></tr>");
});
});
});
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th width="100">KODE MK</th>
<th width="350">NAMA MK</th>
<th width="50">SEMESTER</th>
<th width="50">SKS</th>
<th width="50">GRADE</th>
</tr>
</thead>
<tbody id="khs">
#foreach($mahasiswa as $row)
#php
$nilai = hitung_nilai($row->id);
$grade = hitung_grade($nilai);
$mutu = hitung_mutu($grade);
#endphp
<tr>
<td>{{ $row->kode_mk }}</td>
<td>{{ $row->nama_mk }}</td>
<td>{{ $row->semester }}</td>
<td>{{ $row->jml_sks}}</td>
<td>{{ $grade }}</td>
<td>{{ $mutu*$row->jml_sks }}</td>
</tr>
#php
$totalSKS=$totalSKS+$row->jml_sks;
$totalMutu = $totalMutu+$mutu*$row->jml_sks;
#endphp
#endforeach
</tbody>
</table>

What might help you is to identify each row by an ID, it could be an ID in the <tr id="KM003"> or in the specific TD of the grade, like <td id="KM003Grade"> so you could get the grade by the students code like: var Name = $('#IDused').innerHTML;
If you use by the ROW approach, you could use a class in each child TD to identify the attribute, for example:
<tr id="km003">
<td class="kode">{{ $row->kode_mk }}</td>
<td class="nama">{{ $row->nama_mk }}</td>
<td class="semester">{{ $row->semester }}</td>
<td class="jml_sks">{{ $row->jml_sks}}</td>
<td class="grade">{{ $grade }}</td>
</tr>
and then you could get the value by var grade = $("#km003 .grade").innerHTML;

Function isn't called with responsed data

Hello I got a weird problem... I lost almost 2 hrs and I have no idea why it doesn't work.
It should sum all values for every dept where username = name choosed by select and where date = date choosed by datepicker.
It works great on jsFiddle but when I am trying use it with responsed data it doesn't work and don't have any errors in console.
What am I doing wrong? This is code in my app not the same which is in jsFiddle
HTML:
<div layout="row">
<md-datepicker ng-model="myDateUser" md-placeholder="Enter date"></md-datepicker>
{{myDateUser}}
<md-input-container flex="50">
<label for="repeatSelect"> Select user: </label>
<md-select ng-model="data.model" ng-change="sum(data.model)">
<md-option ng-value="logins.name" ng-repeat="logins in chooseLogins">{{logins.name}}</md-option>
</md-select>
</md-input-container>
<br/>
<hr/>
<tt>{{data.model}}</tt>
</div>
<md-table-container>
<table md-table>
<thead md-head>
<tr md-row>
<th md-column>Dept</th>
<th md-column>Total time</th>
<th md-column></th>
</tr>
</thead>
<tbody md-body>
<tr ng-if="!data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="test in tests">
<td md-cell>{{ test.dept }}</td>
<td md-cell>{{ test.total }}</td>
<td md-cell></td>
</tr>
<tr ng-if="data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="(key,val) in data.model">
<td md-cell>{{ key }}</td>
<td md-cell>{{ val }}</td>
<td md-cell></td>
</tr>
</tbody>
</table>
</md-table-container>
JS:
function getTotalTime() {
$http.get('db_files/totalTimeDB.php').then(function(response) {
$scope.data = response.data;
$scope.sum = function(name) {
let model = $scope.data.filter(function(item) {
return (item.username == name && TheDate(item))
});
let tests = {};
model.forEach(function(item) {
if (!tests.hasOwnProperty(item.dept)) {
tests[item.dept] = 0;
}
tests[item.dept] += parseFloat(item.task_time);
});
$scope.data.model = tests;
}
function TheDate(item){
if($scope.myDateUser){
var myDateUser = new Date($scope.myDateUser);
var itemDate = new Date(item.task_end);
console.log("task_end " + item.task_end);
console.log("myDate " + $scope.myDateUser);
if(myDateUser.getFullYear() != itemDate.getFullYear() || myDateUser.getMonth() != itemDate.getMonth()){
return false;
}
}
return true
}
Example console.log from $scope.data = response.data;
Object
dept:"Test2"
status:"Closed"
task:"test test test"
task_end:"2016-09-02"
task_start:"2016-09-02"
task_time:"80"
username:"Nelson"
__proto__:Object
It works like show total sum only where username = choosed name and TheDate function is ignored. Also console.log shows nothing ( in example jsFiddle console.log shows selected date and name )
It looks like the function isn't called.

Is it possible to to make many $scope variables in angular

I want to receive from server some JSON data and print it like this:
<div ng-app="myApp" ng-controller="pastController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.shops }}</td>
</tr>
</table>
<table>
<tr ng-repeat="y in names1">
<td>{{ y.shops }}</td>
</tr>
</table>
</div>
<table>
<tr ng-repeat="z in names2">
<td>{{ z.shops }}</td>
</tr>
</table>
and my angular script:
app.controller('pastController', function($scope, $http){
var req = {
method: 'post',
url: 'showData'
};
$http(req).then(function(response){
console.log(response.data.pastData);
$scope.names = response.data.pastData;
$scope.names2 = response.data.presentData;
$scope.names1 = response.data.futureData;
});
});
and here is like my json response looks like:
{
"pastData" :
[
{"id":1, "shopPlace":"warsaw", "shopDate":"2016-08-10", "shops":"milk"},
{"id":2, "shopPlace":"warsaw", "shopDate":"2016-09-10", "shops":"table"}
],
"futureData" :
[
{"id":3, "shopPlace":"krakow", "shopDate":"2016-12-10", "shops":"bread"},
{"id":4, "shopPlace":"kielce", "shopDate":"2016-11-20", "shops":"water"}
],
"presentData" :
[
{"id":5, "shopPlace":"wroclaw", "shopDate":"2016-11-07", "shops":"sugar"}
]
}
Everything works fine for names and only for names for names1 it shows : {{ y.shops }} and for names2: {{ z.shops }}

One problem that I see immediately is that the markup for your 3rd table is outside of the div where the angular application and controller have scope, it should be inside. However, if your second table is not being displayed either, then there must be another issue. Here is a working plunker demonstrating everything working. Note that the data is hardcoded instead of being fetched from an API:
https://plnkr.co/edit/ZbJeatH1SkkVDxqNkQ0b?p=preview
<div ng-app="myApp" ng-controller="pastController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.shops }}</td>
</tr>
</table>
<hr/>
<table>
<tr ng-repeat="y in names1">
<td>{{ y.shops }}</td>
</tr>
</table>
<hr/>
<table>
<tr ng-repeat="z in names2">
<td>{{ z.shops }}</td>
</tr>
</table>
</div>
var app = angular.module('myApp', []);
app.controller('pastController', function($scope, $http) {
var data = {
"pastData" : [{"id":1, "shopPlace":"warsaw", "shopDate":"2016-08-10", "shops":"milk"}, {"id":2, "shopPlace":"warsaw", "shopDate":"2016-09-10", "shops":"table"}],
"futureData" : [{"id":3, "shopPlace":"krakow", "shopDate":"2016-12-10", "shops":"bread"}, {"id":4, "shopPlace":"kielce", "shopDate":"2016-11-20", "shops":"water"}],
"presentData" : [{"id":5, "shopPlace":"wroclaw", "shopDate":"2016-11-07", "shops":"sugar"}]
};
$scope.names = data.pastData;
$scope.names2 = data.presentData;
$scope.names1 = data.futureData;
});

Your html markup is incorrect. Your last table is outside the scope of your controller. This is very easy to see when the markup is properly formatted.
<div ng-app="myApp" ng-controller="pastController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.shops }}</td>
</tr>
</table>
<table>
<tr ng-repeat="y in names1">
<td>{{ y.shops }}</td>
</tr>
</table>
</div>
<table>
<tr ng-repeat="z in names2">
<td>{{ z.shops }}</td>
</tr>
</table>

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.