Is it possible to bind multiple JSON objects in Mustache? I have a little app where I use backbone to extract data from a restful api.
I'm essentially getting a list of employees, and then all of their subordinates. I am passing the model to mustache and binding like this:
render: function(){
//debugger;
var model = {
manager: this.model.toJSON(),
subordinates: this.model.reports.toJSON()
}
console.log('render',this.model.toJSON()); // show the employee and the list of subordinates
this.el.innerHTML = Mustache.to_html(this.template, { employee_detail: model });
}
My template looks like below. It works fine for binding and displaying the manager variables, but the subordinates variables don't show up. I want to display an employee's details and then list all of their subordinates.
{{#employee_detail}}
<h3>{{manager.firstName}} {{manager.lastName}}</h3>
<h4>{{manager.title}}</h4>
<table class="table table-striped">
{{#manager.managerId}}
<tr>
<td>Manager:</td>
<td><i class="icon-user"></i> <a href='#employees/{{manager.managerId}}'>{{manager.managerName}}</a></td>
</tr>
{{/manager.managerId}}
<tr>
<td>Office Phone:</td>
<td><i class="icon-home"></i> {{manager.officePhone}}</td>
</tr>
<tr>
<td>Cell Phone:</td>
<td><i class="icon-headphones"></i> {{manager.cellPhone}}</td>
</tr>
<tr>
<td>Email:</td>
<td><i class="icon-envelope"></i> {{manager.email}}</td>
</tr>
<tr>
<td>Twitter:</td>
<td><i class="icon-retweet"></i> {{manager.twitterId}}</td>
</tr>
</table>
<table>
<tr>
<td>Subordinates:</td>
<td><i class="icon-user"></i> <a href='#employees/{{subordinates.id}}'>{{subordinates.fullName}}</a>
</td>
</tr>
</table>
{{/employee_detail}}
subordinates suggests me you're working with array. If that's the case I believe you should iterate over its elements and display each one separately. If I am right -you are getting 2x undefined when calling {{subordinates.id}}'>{{subordinates.fullName}} because arrays don't have such properties.
more info about itarations over arrays in mustache you can find in this topic:
Mustache.js: Iterate over a list received via json
Related
I am receiving the following data from an API:
[[9, "Brown", 2], [1, "Amy", 1]]
I want to show it in a table format in my Angular app. I have tried the following code, but I think it's not the right way to do it.
<tbody>
<tr *ngFor="let user of report">
<td>{{user[0]}}</td>
<td>{{user[1]}}</td>
<td>{{user[2]}}</td>
</tr>
</tbody>
It is array of array to you need to iterate two for loop in you case like this.
<table>
<tbody>
<tr *ngFor="let user of data">
<td *ngFor="let e of user">{{ e }}</td>
</tr>
</tbody>
</table>
I have made a custom matrix in power bi and have an extra comment column in the last of it! The matrix will send the JSON data to server through api whenever I press enter after finish my comment [purpose is for saving all data into Database] but I have no idea to make it! Can anyone help me please?!
Below is HTML structure's Custom Matrix:
<div class="datagrid">
<table>
<tbody>
<tr>
<th></th>
<th colspan="undefined">Northeast</th>
<th colspan="undefined">Southern</th>
</tr>
<tr>
<th>California</th>
<td>5</td>
<td>6</td>
<td>
<div contenteditable="">I'm editable</div>
</td>
</tr>
<tr>
<th>Florida</th>
<td>10</td>
<td>15</td>
<td>
<div contenteditable="">I'm editable</div>
</td>
</tr>
</tbody>
</table>
</div>
I have converted successfully with help of #Eric Jones in this post: How to convert Matrix HTML to JSON in Typescript (for sending through api)
The structure of my JSON is:
[
{
"name_column_field":"Arizona",
"value":"3759959.75",
"comment":"I'm editable",
"name_row_field":"Southern"
},...
]
I just started learning Angular 5 and I found this interesting data table format that I want to use in my Angular project: https://bootsnipp.com/snippets/featured/condensed-table-example, especially to get a different color for each label in a column like in the "status" column in the link above.
In this example, labels are hardcoded in the table while in my case I would like to get them straight from my database and display them on the UI(with color variation).
<div class="container">
<div class="row">
<div class="span5">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donna R. Folse</td>
<td>2012/05/06</td>
<td>Editor</td>
<td><span class="label label-success">Active</span>
</td>
</tr>
<tr>
<td>Emily F. Burns</td>
<td>2011/12/01</td>
<td>Staff</td>
<td><span class="label label-important">Banned</span></td>
</tr>
<tr>
<td>Andrew A. Stout</td>
<td>2010/08/21</td>
<td>User</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>Mary M. Bryan</td>
<td>2009/04/11</td>
<td>Editor</td>
<td><span class="label label-warning">Pending</span></td>
</tr>
<tr>
<td>Mary A. Lewis</td>
<td>2007/02/01</td>
<td>Staff</td>
<td><span class="label label-success">Active</span></td>
</tr>
</tbody>
</table>
I was thinking about using ngSwitch but I am not sure. Any idea on how to do it? Thanks!
I think you could use the [ngStyle] directive
considering that you have a users array xD
you could set something like
<ul *ngFor ="let user of users">
<li [ngStyle]="{'background':getColor(user.status)}">{{user.name}}{{user.status}}</li>
</ul>
and do an function like this in your TS
getColor(status){
switch (status){
case "Inactive":
return 'gray';
case "Banned":
return 'red';
case "Active":
return 'green';
}
and lets say
users: any[] = [
{
"name" : "The First dude",
"status" : "Banned"
},
{
"name" : "The second one",
"status" : "Active"
}
];
in that case every time that an user is called, the function getColor will be triggered and will return a color to the background of the :P
Sorry about my english xD i have a lot to learn
I am using an ng-repeat to generate some data (username, login, role and actions). Each dropdown (role) has the same list of options.
Expected output :
Each row of data can have a different selected option (like the image) and a service call is made whenever a change is made to save the change.
My problem is that I can't choose different options for each row. Because they are all bound to the same ng-model, they all detect the change and all change to the new option.
<table>
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="participant in model.participantData">
<td>{{participant.DisplayName}}</td>
<td>{{participant.UserLogin}}</td>
<td>
<label for="{{participant.ParticipantID}}" class="sr-only">
Choose a role
</label>
<select id="{{participant.ParticipantID}}" data-ng-options="role.RoleID as role.RoleName for role in model.rolesData" data-ng-change="roleChanged(participant)" data-ng-model="model.chosenRole">
</select>
</td>
<td>
<span aria-hidden="true" class="fa fa-minus-circle clickable"</span>
<span class="sr-only">Delete group member</span>
</td>
</tr>
</tbody>
</table>
Instead of giving same model , Give them model by ng-repeat instance
Like this
data-ng-model="participant.chosenRole"
Select will be
<select
id="{{participant.ParticipantID}}"
data-ng-options="role.RoleID as role.RoleName for role in model.rolesData"
data-ng-change="roleChanged(participant)"
data-ng-model="participant.chosenRole">
</select>
You can get selected value of each row from model.participantData
I am working on an accounts page that lists transactions (credits and debits).
I would like the user to be able to click on a table row and it expands showing more information.
I am using Twitter bootstrap and have looked over the documentation and this is the result I have
<table class="table table-striped" id="account-table">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
<th>Debit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
<div id="demo1" class="demo out collapse">Demo1</div>
</tr>
See:
http://jsfiddle.net/2Dj7Y/
The only issue is that it displays the "dropdown information" in the wrong place, I would like to add in a new row, instead of printing it at the top of the table
I have also tried adding in a new table row (which just displays the row, and no collapse action (only applied to the first row)
<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
<tr id="demo1" class="demo out collapse">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
</tr>
</tr>
See http://jsfiddle.net/ypuEj/
I'm not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get it working and saw an example somewhere on SO that used accordion.
Here's your updated fiddle:
http://jsfiddle.net/whytheday/2Dj7Y/11/
Since I need to post code here is what each collapsible "section" should look like ->
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordion-body collapse" id="demo1">Demo1</div>
</td>
</tr>
Expanding on Tony's answer, and also answering Dhaval Ptl's question, to get the true accordion effect and only allow one row to be expanded at a time, an event handler for show.bs.collapse can be added like so:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
I modified his example to do this here: http://jsfiddle.net/QLfMU/116/
If you're using Angular's ng-repeat to populate the table hackel's jquery snippet will not work by placing it in the document load event. You'll need to run the snippet after angular has finished rendering the table.
To trigger an event after ng-repeat has rendered try this directive:
var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
Complete example in angular:
http://jsfiddle.net/ADukg/6880/
I got the directive from here:
Use AngularJS just for routing purposes
All the other answers address previous versions of Bootstrap. To implement this in the latest version -- Bootstrap 5 -- check out this link.