i have an div which contains angularjs ng-repeat directive to list all values. after assigning to scope variable which is being used by ng-repeat if i load modal using
$('#divId').modal('show')
all variables are getting loaded, but if i use document.getElementby('Id'), i am able to to see variable binding only for
{{ }}
here is my code
<div id="labeltoPrint">
Date: {{ scpDate }}
<table>
<tr ng-repeat="item in listofItems">
<td> {{item.name}} </td>
<td> {{item.value}} </td>
</tr>
</table>
</div>
i tried to $scope.$apply but no luck
Thanks
for reading this
After several hits, i did a work around using $timeOut, scope variables are getting updated with that, donno why $scope.$apply is not updating scope :(
Thanks for reading
Related
I'm having trouble understanding why this is happening! So, this block of code:
<div class="container">
<div class="row" v-for="rows in data.Rows"> {{ rows }} </div>
</div>
Will render all the rows in the object.
But, when I use the same syntax in a table instead like this:
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
I get the error:
[Vue warn]: Property or method "rows" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
How come there are issues in using the v-for like this in a table? I want a table to display the data as it better suits the purpose in this case. Othewise I would have chosen divs instead of table rows, but I would love for this to works. Any ideas as to why this is happening?
If you use that template directly within an HTML file (as opposed to a template string or SFC) it will be parsed by the browser before it gets to Vue. Browsers are fussy about tables and what elements are allowed inside which other elements.
The example below shows how the browser will parse your template into DOM nodes. Notice how the {{ rows }} gets moved:
let html = document.getElementById('app').innerHTML
html = html.replace(/</g, '<').replace(/>/g, '>')
document.getElementById('output').innerHTML = html
#app {
display: none;
}
<div id="app">
<table>
<tr v-for="rows in data.Rows"> {{ rows }} </tr>
</table>
</div>
<pre id="output">
</pre>
It is this mangled version of the template that Vue is trying to run and as you can see {{ rows }} has been moved outside the v-for, causing the error.
The official documentation covers this here:
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
The solution would just be to include a <td> in your template:
<table>
<tr v-for="rows in data.Rows">
<td>{{ rows }}</td>
</tr>
</table>
You cannot directly use "rows" property inside tr tag, you need td tag
like this
<table>
<tr class="row" v-for="rows in data.Rows"> <td>{{ rows }} </td></tr>
</table>
working codepen here: https://codepen.io/chansv/pen/dyyVybK
I wanted to drag multiple table data in a row instead of just a single td tag. In other words, when i drag either columns, i want to drag both the "Random" and "name" column together.
<table id="app">
<tr>
<th>Random</th>
<th>name</th>
</tr>
<tr>
<td>
<draggable v-model="items">
<transition-group name="list-complete">
<div v-for="item in items"
v-bind:key="item.message"
class="list-complete-item">
{{ item.message }}
</div>
</transition-group>
</draggable>
</td>
<td>
<div v-for="item in items" class="list-complete-item">
{{ item.name }}
</div>
</td>
</tr>
</table>
I have tried shifting and playing around with the draggable tag and the transition-group tag but nothing seems to work.
Please help. :(
Here is my jsfiddle code ->
https://jsfiddle.net/wusprtnL/63/
This is not supported by Sortable nor by Vue.draggable. So there are no combination of options that will make irt work. Reference: https://github.com/SortableJS/Sortable/issues/1049
Right now this is supported as a plugin by sortable, but the plugin has not been integrated in vue.draggable.
https://github.com/SortableJS/Vue.Draggable/issues/649
I've got a nested ng-repeat that displays a seemingly random list of the possible ones I get.
My HTML is like this:
<table ng-init="getHouses()">
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr ng-repeat="h in houses>
<td>{{h.Id}}</td>
<td>{{h.Name}}</td>
<td ng-init="peopleInhHouse(h.Id)">
<span ng-repeat="p in peopleInHouse">p.Name</span>
<br />
</td>
</tr>
I think the problem lies here because I get my lists of people correctly, the problem being that it displays the same list of people for all the different houses and it seems to randomize between everytime I refresh the page.
Your variable peopleInHouse will always reference to the same value. And since you are using a request to get data you can't simply use it directly in the ng-repeat
So just update the ng-init function so it populates the people in the house
The function should look something like
function addPeopleToHouse(house){
request(house.id).then(function(response){
house.People = response.data;
})
}
And update the HTML to
<td ng-init="addPeopleToHouse(h)">
<span ng-repeat="p in h.People">p.Name</span>
<br />
</td>
Can I use ngIf without an extra container element?
<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>
It doesn't work in a table because that would make invalid HTML.
ng-container is preferred over template:
<ng-container *ngIf="expression">
See:
Angular 2 ng-container
https://github.com/angular/angular.io/issues/2303
I found a method for that on: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template.
You can simply use the <template> tag and replace *ngIf with [ngIf] like this.
<template [ngIf]="...">
...
</template>
You can't put div directly inside tr, that would make invalid HTML. tr can only have td/th/table element in it & inside them you could have other HTML elements.
You could slightly change your HTML to have *ngFor over tbody & have ngIf over tr itself like below.
<tbody *ngFor="...">
<tr *ngIf="...">
...
</tr>
<tr *ngIf="!...">
...
</tr>
..
</tbody>
adding brackets resolves this issue
<ng-container *ngIf="(!variable| async)"></ng-container>
You can try this:
<ng-container *ngFor="let item of items;">
<tr *ngIf="item.active">
<td>{{item.name}}</td>
</tr>
</ng-container>
Here, I have iterate loop in ng container so it will not create extra dom and later in tr tag check condition if I want to render or not.
Working on some array projects but Stuck on point where *ngFor did't accept dynamic value provided by another *ngFor.
<table border="2">
<tr>
<th rowspan="2">Subject</th>
<th colspan="4" *ngFor='#category of json.category_name'>{{category}}</th>
<th colspan="4">Overall</th>
</tr>
<tr>
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa.category">{{fa}}</th> //Not Working
</div>
</tr>
</table>
here in the commented line i want to provide json.total_fa.category where this category is coming from another *ngFor which is declared just above. but getting no result it seems angular try to find out json.total_fa.category itself which is not present.
but i want to load json.total_fa_term1 (which is first index from the category). how can i achive this.
Can i use more than one *ngFor on same HTML component ?
sometimes *ngFor and *ngIf is not working properly while embed on the same element why ?
here is my workground demo
You need to use .total_fa[category] instead of .total_fa.category otherwise you will try to access a property with name category:
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa[category]">{{fa}}</th>
</div>
See the updated plunkr: http://plnkr.co/edit/v08AdzNsR4GHMlZWQNsR?p=preview.