Develop Reference

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>

Cannot make dynamic two column table

I want to have a table with headers and data dynamically loaded from object of two arrays. Unfortunately, these rows aren't displayed.
http://jsfiddle.net/x7ur9u07/4/
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<tr>
</thead>
<tbody>
<tr ng-repeat="inout in inoutContainer track by $index">
<td>{{ inout.input_vector[$index] }}</td>
<td>{{ inout.output_vector[$index] }}</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
window.alert('hello');
$scope.inoutContainer = {input_vector: ["0.0","0.0"], output_vector: ["0.0","0.0"]};
$scope.name = 'Superhero';
}

I managed to figure out a way to make it work -- you had a number of syntax errors that angularJS didn't understand
http://jsfiddle.net/x71jm9r8/
Basically I simplified the angularJS code
then added the ng-app directive to the container div
removed the track by $index part of the ng-repeat directive,
and finally added the myApp.controller() declaration.

Can you populate a table with Angular.js without hardcoding column names?

I have a simple Angular.js application that grabs tabular data from a mysql database and shows it in a simple bootstrap table. I’m using this code below to show the table column names without hardcoding them individually…
HTML:
<table class="table">
<thead>
<tr style="background:lightgrey">
<th ng-repeat="column in columns"> {{ column }} </th>
</tr>
</thead>
and in the controller I create ’$scope.columns’ with something like this…
var columnNames = function(dat) {
var columns = Object.keys(dat[0]).filter(function(key) {
if (dat[0].hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
return columns;
};
DataFactory.getTables(function(data) {
$scope.columns = columnNames(data);
$scope.tables = data;
});
And this works as expected and it’s great, but what about the the rest of the data.. So for example, the body of my table currently looks like this…
HTML:
<tbody>
<tr ng-repeat="x in tables ">
<td> {{ x.id}} </td>
<td> {{ x.name }} </td>
<td> {{ x.email }} </td>
<td> {{ x.company }} </td>
</tbody>
I’ve tried using two loops like this…
HTML:
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat=“column in columns”> {{ x.column }} </td>
</tr>
</tbody>
But this code doesn’t work, So is it possible to populate a table with angular without hardcoding the column names in HTML, and if so whats the most efficient way to do so?

You might want to try this https://jsfiddle.net/8w2sbs6L/.
<div data-ng-app="APP">
<table ng-controller="myController" border=1>
<thead>
<tr>
<td ng-repeat="column in columns">{{column}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
</tbody>
</table>
</div>
<script>
'use strict';
angular.module('APP', [])
.controller('myController', ['$scope', function($scope){
$scope.tables = [
{
"column1":"row1-column1",
"column2":"row1-column2",
"column3":"row1-column3",
"column4":"row1-column4"
},
{
"column1":"row2-column1",
"column2":"row2-column2",
"column3":"row2-column3",
"column4":"row2-column4"
}
];
$scope.columns = [
"column1",
"column2",
"column3",
"column4"
];
}]);
</script>

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.

How to access and use index of each item inside ng-repeat

I have a table where the last column in each row contains a little loading icon which I would like to display when a button inside the table is clicked.
When each table row is generated with ng-repeat, the loader shows up in every row rather than the individual one. How can I set ng-show to true or false for only the current index clicked?
Template:
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
Controller:
$scope.someAction = function(recordName) {
$scope.loading = true;
};

You can pass in the $index parameter and set/use the corresponding index. $index is automatically available in the scope of an ng-repeat.
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading[$index]">Loading...</td>
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Here's a generic sample with all the logic in the view for convenience: Live demo (click).
<div ng-repeat="foo in ['a','b','c']" ng-init="loading=[]">
<p ng-click="loading[$index]=true">Click me! Item Value: {{foo}}<p>
<p ng-show="loading[$index]">Item {{$index}} loading...</p>
</div>

There are many ways to handle this.
The problem here is that your variable loading is sharing the scope between the rows.
One approach could be use $index
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
JS
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Using a property in your object record:
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="record.loading">Loading...</td>
</tr>
JS
$scope.someAction = function(record) {
var name = record.name;
record.loading = true;
};
Best regards

The scope inside ng-repeat is different form the one outside. Actually the scope outside ng-repeat is the parent of the one inside. So the html code goes here
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="$parent.loading">Loading...</td>
</tr>