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.
Related
Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
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>
I have an application which shows data in tabular form which has columns
id, name, price, quantity
A am showing the data using ng-repeat Please see this
Plunker
<body ng-controller="myController">
<h1>Data</h1>
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>PRICE</th>
<th>QUANTITY</th>
</tr>
<tr ng-repeat="item in myData">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
</table>
What I want to do is to add multiple filters in ng-repeat on this table
a) Filter by 'Name'
b) Filter by 'Price' OR 'Quantity'
It means that at any given point of time the result of the table should be filtered by combination of
i) EITHER 'Name' and 'Price'
ii) OR 'Name' and 'Quantity'
The Quantity filter should be inactive when Price filter is active and vice versa.
I will have 3 input fields for the filter parameters.
How can I apply filters to the ng-repeat in html to achieve this?
I suggest you create a custom filter and pass a custom filterObject, containing all filteroptions to this filter.
<tr ng-repeat="item in myData | myCustomFilter:filterObject">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
your filterobject would look like :
$scope.filterObject = {
id: false,
name: true,
price: false,
quantity: true
}
In myCustomFilter :
app.filter('myCustomFilter', function(items, filterObject) {
// filter your items depending on which filters are enabled
});
this is test myDatafilter
add in js
myDatafilter = function () {};
<h1>Data</h1>
<input type="text" ng-model="myDatafilter"/>
<tr ng-repeat="item in myData | filter:myDatafilter">
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.
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>