Probably a trivial question for some. I have a view model for my objects that looks like so:
this.Activities = ko.observableArray([
{ "date": "28/11/2012 00:00:00",
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "AMS",
"description": "Data Request",
"length": "135"
},
]},
{ "date": "30/11/2012 00:00:00",
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "SLGT",
"description": "Software Development",
"length": "240"
},
{ "company": "BOW",
"description": "Data Request",
"length": "30"
},
]},
]);
I want to build an accordion which will hide activities arrays and will display dates. Whenever a date is clicked a list of activites matching this date will be presented by expanding appropriate panel below. Now, in the project I don't use Knockout.js for, I just use Id of a general Activity object to link ID attribute of accordion header with a name attribute in accordion body element. I use Model properties in the strongly typed view to achieve that. Since in the Knockout.js I feed a view model with the details of the Activities I have limited control over the structure of Html being created while data-binding. How can I link accordion headers with matching body elements then?
This assumes you are using the bootstrap accordions but should give you a good idea of how to do it with any accordion system.
http://jsfiddle.net/billpull/f8Cbb/1/show/
HTML
<div class="accordion" id="accordion2" data-bind="foreach: {data: Activities, as: 'activity'}">
<!-- ko template: 'accordionTmpl' --><!-- /ko -->
</div>
<script type="text/html" id="accordionTmpl">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-bind="text: activity.date, attr: { href: '#' + activity.order}"></a>
</a>
</div>
<div class="accordion-body collapse" data-bind="attr: { id: activity.order}">
<div class="accordion-inner">
<ul data-bind="foreach: {data: activity.activities, as: 'subActivity'}">
<li>
<span data-bind="text: subActivity.company"></span><br>
<span data-bind="text: subActivity.description"></span><br>
<span data-bind="text: subActivity.length"></span>
</li>
</ul>
</div>
</div>
</div>
</script>
Javascript
var ViewModel = function () {
this.Activities = ko.observableArray([
{ "date": "28/11/2012 00:00:00",
"order" : 1,
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "AMS",
"description": "Data Request",
"length": "135"
},
]},
{ "date": "30/11/2012 00:00:00",
"order" : 2,
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "SLGT",
"description": "Software Development",
"length": "240"
},
{ "company": "BOW",
"description": "Data Request",
"length": "30"
},
]},
]);
};
$(function () {
ko.applyBindings(new ViewModel());
});
Related
I have created a dynamic table using FooTable jQuery Plugin. http://jsbin.com/wasawa/edit
Here I used MySQL timestamp using PHP date('Y-m-d H:i:s') format. e.g- 2016-01-19 01:22:13, but using the FooTable I'm not getting the actual date format.
Any help would be appreciated.
Updated the columns object like below:
{
"name": "createdat",
"title": "Created On",
"formatter": function(value){
return moment(value).format('MMM Do YY');
}
}
I have to update the formatter function.
And now it is working fine as expected.
Thanks for your support.
In case this helps someone else with the same problem. I was able to get the example from the site, using the following. You must include moment.js for this to work. https://momentjs.com/
This code won't run in SO's code runner because footable requires localstorage.
It displays the unix time from an external source as whatever you want. I have it using MMM Do YY in this example.
jQuery(function($) {
$('#showcase-example-22').footable({
"useParentWidth": true,
columns: [
{
"name": "id",
"title": "ID",
"breakpoints": "xs sm",
"type": "number",
"style": {
"width": 80,
"maxWidth": 80
}
},
{
"name": "firstName",
"title": "First Name"
},
{
"name": "lastName",
"title": "Last Name"
},
{
"name": "something",
"title": "Never seen but always around",
"visible": false,
"filterable": false
},
{
"name": "jobTitle",
"title": "Job Title",
"breakpoints": "xs sm",
"style": {
"maxWidth": 200,
"overflow": "hidden",
"textOverflow": "ellipsis",
"wordBreak": "keep-all",
"whiteSpace": "nowrap"
}
},
{
"name": "started",
"title": "Started On",
"type": "numeric",
"breakpoints": "xs sm md"
},
{
"name": "dob",
"title": "Date of Birth",
"formatter": function(value) {
var datetime = JSON.parse(value)
return moment(datetime).format("MMM Do YY")
}
},
{
"name": "status",
"title": "Status"
}
],
rows: [{
"id": 1,
"firstName": "Annemarie",
"lastName": "Bruening",
"something": 1381105566987,
"jobTitle": "Cloak Room Attendant",
"started": 1367700388909,
"dob": 122365714987,
"status": "Suspended"
},
{
"id": 2,
"firstName": "Nelly",
"lastName": "Lusher",
"something": 1267237540208,
"jobTitle": "Broadcast Maintenance Engineer",
"started": 1382739570973,
"dob": 183768652128,
"status": "Disabled"
},
{
"id": 3,
"firstName": "Lorraine",
"lastName": "Kyger",
"something": 1263216405811,
"jobTitle": "Geophysicist",
"started": 1265199486212,
"dob": 414197000409,
"status": "Active"
},
{
"id": 4,
"firstName": "Maire",
"lastName": "Vanatta",
"something": 1317652005631,
"jobTitle": "Gaming Cage Cashier",
"started": 1359190254082,
"dob": 381574699574,
"status": "Disabled"
},
{
"id": 5,
"firstName": "Whiney",
"lastName": "Keasler",
"something": 1297738568550,
"jobTitle": "High School Librarian",
"started": 1377538533615,
"dob": -11216050657,
"status": "Active"
},
{
"id": 6,
"firstName": "Nikia",
"lastName": "Badgett",
"something": 1283192889859,
"jobTitle": "Clown",
"started": 1348067291754,
"dob": -236655382175,
"status": "Active"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.css" rel="stylesheet" />
<table id="showcase-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true" data-state="true"></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.js"></script>
enter code here
I want to get the value of the selected phone : "normalizedNumber".
if i check the item then i want to make a console.log of the selected telefono.
i can't access to the item selected on the js file
html
<div ng-repeat="item in contactos| orderBy:'displayName' | filter : consulta">
<ion-item class="item-stable"
ng-click="abrirGrupo(item)"
ng-class="{active: isGroupShown(item)}">
<i class="icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus'"></i>
{{::item.displayName}}
<label style="float:right" ng-show="muestra">elegido</label>
</ion-item>
<ion-item class="item-accordion"
ng-repeat="i in item.phoneNumbers"
ng-show="isGroupShown(item)">
<ion-checkbox ng-click="cambi()"
ng-model="tel"
class="checkbox-dark"
ng-value=i.normalizedNumber>
telefono: {{::i.normalizedNumber}}
</ion-checkbox>
</ion-item>
</div>
js
$scope.cambi = function () {
$scope.muestra = !$scope.muestra;
console.log('elegido: ' + $scope.tel);
};
$scope.contactos = [{
"id": "1",
"displayName": "Kate Bell",
"phoneNumbers": [{
"number": "(555) 564-8583",
"normalizedNumber": "(555) 564-8583",
"type": "MOBILE"
}, {
"number": "(415) 555-3695",
"normalizedNumber": "(415) 555-3695",
"type": "OTHER"
}]
}, {
"id": "2",
"displayName": "Daniel Higgins",
"phoneNumbers": [{
"number": "555-478-7672",
"normalizedNumber": "555-478-7672",
"type": "HOME"
}, {
"number": "(408) 555-5270",
"normalizedNumber": "(408) 555-5270",
"type": "MOBILE"
}, {
"number": "(408) 555-3514",
"normalizedNumber": "(408) 555-3514",
"type": "OTHER"
}]
}, {
"id": "3",
"displayName": "John Paul Appleseed",
"phoneNumbers": [{
"number": "888-555-5512",
"normalizedNumber": "888-555-5512",
"type": "MOBILE"
}, {
"number": "888-555-1212",
"normalizedNumber": "888-555-1212",
"type": "HOME"
}]
}];
}
Pass the value to the callback:
<ion-checkbox ng-click="cambi(i)"
and then change the method to accept the parameter
$scope.cambi = function (telefono) {
$scope.muestra = !$scope.muestra;
console.log('elegido: ' + telefono);
};
I have a problem with the recursion in angularJs.
I want to repeat all names from JSON file:
Here is my JSON file structure:
var data = {
"id": "580",
"name": "test",
"status": "ACTIVE",
"parentId": null,
"children": [
{
"id": "581",
"name": "test 2",
"status": "ACTIVE",
"parentId": "580",
"children": [{
"id": "594",
"name": "test 3",
"status": "ACTIVE",
"parentId": "581",
"children": []
}]
}
]
}
All I want is just to know how to make ng-repeat children in children?
You should use an ng-template in order to use it recursive.
<script type="text/ng-template" id="exampleTree">
{{ x.name }}
<ul ng-if="x.children">
<li ng-repeat="x in x.children" ng-include="'exampleTree'">
</li>
</ul>
</script>
To use this template and run it:
<ul>
<li ng-repeat="x in data" ng-include="'exampleTree'"></li>
</ul>
JSFiddle here
You can use ng-repeat with a template so it goes as far as you have data. Here is an example:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.child = {
"id": "580",
"name": "test",
"status": "ACTIVE",
"parentId": null,
"children": [{
"id": "581",
"name": "test 2",
"status": "ACTIVE",
"parentId": "580",
"children": [{
"id": "594",
"name": "test 3",
"status": "ACTIVE",
"parentId": "581",
"children": []
}]
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
<!-- This is the template that can be repeated in itself-->
<script type="text/ng-template" id="childView">
{{child.name}}
<ul>
<li ng-repeat="child in child.children" ng-include="'childView'"></li>
</ul>
</script>
<!-- This is the initial use for the template-->
<div ng-include="'childView'"></div>
</body>
I had to put child 594 in an array so it would work.
So I have this on my JSON file:
[{
"title": "Secondary Containment",
"products": {
"product": [
{
"id": "1001",
"name": "one"
},
{
"id": "1002",
"name": "two"
},
{
"id": "1003",
"name": "three"
}
]
}
}, {
"title": "Another Title",
"products": {
"product": [
{
"id": "1011",
"name": "alpha"
},
{
"id": "1012",
"name": "beta"
},
{
"id": "1013",
"name": "gamma"
}
]
}
}]
What would I include in my ng-repeat to repeat the id's of the products in a list?
I have ng-repeat="category in categories" in my outer container which is repeating the different titles {{category.title}} but it's not repeating the inner array and nothing shows up when i try outputting {{category.products.product.id}}
Any ideas?
You need nested ng-repeat
<div ng-repeat="category in categories">
<div ng-repeat="product in category.products.product">
{{product.id}}
</div>
</div>
Your html should be
<div data-ng-repeat="category in categories">
<div data-ng-repeat="product in category.products.product">
{{product.id}}
</div>
</div>
You can do as nikhil said. But you need nested ng-repeat. But I personally suggest to use data-ng-repeat instead ng-repeat. The only main reason to use data-ng-* is The data-ng-* allows the HTML to be validated through validators that do not understand Angular
I'm using ng-repeat to populate user objects from Firebase, in addition to using the ngDialog library. My goal is that when you click on, say a 'view' button, a small dialog would pop-up where you can view a user's details. However, I'm trying to follow the documentation for ngDialog and my popup template isn't rendering any of the expressions.
Data model:
{
"members": {
"-JWT5y43YFy1mGirVVS2": {
"date": 1410328158691,
"firstname": "Michael",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "red",
"contact": {
"email": "test#email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
},
"-JWT65QvjwD4TSFjDx4V": {
"date": 1410328192928,
"firstname": "Magic",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "yellow",
"contact": {
"email": "test#email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
}
HTML:
<ul class="cbp-rfgrid" ng-repeat="member in members">
<li class="{{member.status.color}}">
<div class="dripicon profilephoto"></div>
<div>
<h3>{{member.firstname}}</h3>
<div class="dripicon actions"
ng-click="viewStatus()"></div>
<div class="dripicon actions"
ng-click="editStatus()"></div>
</div>
</li>
</ul>
Controller:
myApp.controller('MembersController', function($scope, $firebase, $location, ngDialog){
var ref = new Firebase('https://scrumcheck.firebaseio.com/members');
var members = $firebase(ref);
$scope.members = members.$asObject();
$scope.viewStatus = function(){
ngDialog.open({ template: 'views/popupTmpl.html' });
}
$scope.editStatus = function(){
//not entered yet
}
});
popupTmpl.html
<p>External modal template with external scope: <code>{{member.firstname}}</code></p>
When I click on the 'view' button, triggering the viewStatus() function, I don't get anything for {{member.firstname}} - anyone have any suggestions based off of what you see?
Thanks again!
In popupTmpl.html, you have to write ng-repeat = "member in members" then write {{memeber.firstname}}