I'm teaching myself how to use Polymer [1.0], and I'm attempting to implement a data grid. Problem is...Polymer doesn't have a data grid as a base iron/paper/core element, so I've had to go out and find one.
Luckily, there's a nice one that follows the Google Material Design design specifications, so my intention is to use this one!
My page is set up so that there is a left page drawer, a top header, and a content section. I want the data grid to go into this content section.
The problem I'm facing is that it doesn't appear that the DOM is rendering the data grid component table. It's like it's not running those scripts and filling in the Angular data. My inkling is that it has to do with the way Polymer elements are self-contained, so the data grid scripts aren't reaching it.
I have successfully run this Codepen locally by putting the HTML into a test.html file, and adding the JS to a <script> tag at the bottom of the test HTML page. Everything renders fine. When I try copying and pasting into my application, something happens and the grid won't render.
My index.html code is below:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Project Emerald" />
<title>Data Grid</title>
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- Custom SCSS Styles -->
<link rel="stylesheet" href="styles/scss/styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
<link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body unresolved class="fullbleed layout vertical">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<img src="images/dark-green.svg" class="app-logo" />
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="inbox" href="#">
<iron-icon icon="inbox"></iron-icon>
<span>Inbox</span>
</a>
<a data-route="outbox" href="#">
<iron-icon icon="send"></iron-icon>
<span>Outbox</span>
</a>
<a data-route="trash" href="#">
<iron-icon icon="delete"></iron-icon>
<span>Trash</span>
</a>
<a data-route="spam" href="#">
<iron-icon icon="report"></iron-icon>
<span>Spam</span>
</a>
<paper-submenu>
<div class="menu-trigger">
<a data-route="forum" href="#">
<iron-icon icon="question-answer"></iron-icon>
<span>Forums</span>
</a>
</div>
<paper-menu class="menu-content">
<paper-item>General</paper-item>
<paper-item>UI/UX</paper-item>
<paper-item>Frontend Dev</paper-item>
<paper-item>Graphic Design</paper-item>
<paper-item>Photography</paper-item>
</paper-menu>
</paper-submenu>
<a data-route="updates" href="#">
<iron-icon icon="flag"></iron-icon>
<span>Updates</span>
</a>
<a data-route="promos" href="#">
<iron-icon icon="card-membership"></iron-icon>
<span>Promos</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main fixed>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<!-- Application name -->
<div class="top top-container center horizontal layout flex">
<div class="title">Grid Title</div>
</div>
<!-- Toolbar icons -->
<paper-icon-button icon="filter-list"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
<!-- Main Content -->
<div class="content cards layout">
<md-content layout="column" flex>
<md-card ng-controller="nutritionController">
<md-data-table-toolbar ng-show="!selected.length">
<h2 class="md-title">Nutrition</h2>
</md-data-table-toolbar>
<md-data-table-toolbar class="alternate" ng-show="selected.length">
<div>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</div>
</md-data-table-toolbar>
<md-data-table-container>
<table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred">
<thead md-order="query.order" md-trigger="onorderchange">
<tr>
<th order-by="name" name="Dessert" unit="100g serving"></th>
<th order-by="type" name="Type"></th>
<th numeric order-by="calories.value" name="Calories"></th>
<th numeric unit="g" order-by="fat.value" name="Fat"></th>
<th numeric unit="g" order-by="carbs.value" name="Carbs"></th>
<th numeric unit="g" order-by="protein.value" name="Protein"></th>
<th numeric unit="mg" order-by="sodium.value" name="Sodium"></th>
<th numeric unit="%" order-by="calcium.value" name="Calcium"></th>
<th numeric unit="%" order-by="iron.value" name="Iron"></th>
</tr>
</thead>
<tbody>
<tr md-auto-select md-disable-select="dessert.name === 'Jelly bean'" ng-repeat="dessert in desserts.data | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit">
<td>{{dessert.name}}</td>
<td>
<md-select ng-model="dessert.type" placeholder="Other">
<md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option>
</md-select>
</td>
<td>{{dessert.calories.value}}</td>
<td>{{dessert.fat.value | number: 2}}</td>
<td>{{dessert.carbs.value}}</td>
<td>{{dessert.protein.value | number: 2}}</td>
<td>{{dessert.sodium.value}}</td>
<td show-unit>{{dessert.calcium.value}}</td>
<td show-unit>{{dessert.iron.value}}</td>
</tr>
</tbody>
</table>
</md-data-table-container>
<md-data-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-trigger="onpagechange"></md-data-table-pagination>
</md-card>
</md-content>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
<!-- Core jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Data table libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
<script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
<script src="bower_components/md-data-table/dist/sample.js"></script>
</body>
</html>
Code for sample.js:
angular.module('demoApp', ['ngMaterial', 'md.data.table'])
.controller('nutritionController', ['$q', '$scope', '$timeout', function ($q, $scope, $timeout) {
$scope.selected = [];
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
$scope.desserts = {
"count": 9,
"data": [
{
"name": "Frozen yogurt",
"type": "Ice cream",
"calories": { "value": 159.0 },
"fat": { "value": 6.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 4.0 },
"sodium": { "value": 87.0 },
"calcium": { "value": 14.0 },
"iron": { "value": 1.0 }
}, {
"name": "Ice cream sandwich",
"type": "Ice cream",
"calories": { "value": 237.0 },
"fat": { "value": 9.0 },
"carbs": { "value": 37.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 129.0 },
"calcium": { "value": 8.0 },
"iron": { "value": 1.0 }
}, {
"name": "Eclair",
"type": "Pastry",
"calories": { "value": 262.0 },
"fat": { "value": 16.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 6.0 },
"sodium": { "value": 337.0 },
"calcium": { "value": 6.0 },
"iron": { "value": 7.0 }
}, {
"name": "Cupcake",
"type": "Pastry",
"calories": { "value": 305.0 },
"fat": { "value": 3.7 },
"carbs": { "value": 67.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 413.0 },
"calcium": { "value": 3.0 },
"iron": { "value": 8.0 }
}, {
"name": "Jelly bean",
"type": "Candy",
"calories": { "value": 375.0 },
"fat": { "value": 0.0 },
"carbs": { "value": 94.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 50.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 0.0 }
}, {
"name": "Lollipop",
"type": "Candy",
"calories": { "value": 392.0 },
"fat": { "value": 0.2 },
"carbs": { "value": 98.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 38.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 2.0 }
}, {
"name": "Honeycomb",
"type": "Other",
"calories": { "value": 408.0 },
"fat": { "value": 3.2 },
"carbs": { "value": 87.0 },
"protein": { "value": 6.5 },
"sodium": { "value": 562.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 45.0 }
}, {
"name": "Donut",
"type": "Pastry",
"calories": { "value": 452.0 },
"fat": { "value": 25.0 },
"carbs": { "value": 51.0 },
"protein": { "value": 4.9 },
"sodium": { "value": 326.0 },
"calcium": { "value": 2.0 },
"iron": { "value": 22.0 }
}, {
"name": "KitKat",
"type": "Candy",
"calories": { "value": 518.0 },
"fat": { "value": 26.0 },
"carbs": { "value": 65.0 },
"protein": { "value": 7.0 },
"sodium": { "value": 54.0 },
"calcium": { "value": 12.0 },
"iron": { "value": 6.0 }
}
]
};
$scope.getTypes = function () {
return ['Candy', 'Ice cream', 'Other', 'Pastry'];
};
$scope.onpagechange = function(page, limit) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
$scope.onorderchange = function(order) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
}]);
Solved. The solution is simple, and will be obvious to those who know what they're doing with regards to Angular.
I should have mentioned that I'm also new to Angular and I forgot the all-important html tag definitions. Here's the fix.
Before:
<html lang="">
After:
<html lang="en" ng-app="demoApp" class="ng-scope">
There are some styling conflicts between the data grid and the default Polymer element styling, but those are much easier to sort out.
Related
I have a table that is generated dynamically using Angular 1.6. The data comes from a web API in JSON format. Here is a sample of the data.
{
"CallData": [
{
"TableHeaders": [
{
"id": "0",
"text": "Time"
},
{
"id": "1",
"text": "January"
},
{
"id": "2",
"text": "February"
}
],
"TableRows": [
{
"id": "0",
"cells": [
{
"id": "0",
"text": "7:00"
},
{
"id": "1",
"text": "0"
},
{
"id": "2",
"text": "0"
}
]
},
{
"id": "1",
"cells": [
{
"id": "0",
"text": "8:00"
},
{
"id": "1",
"text": "18"
},
{
"id": "2",
"text": "83"
}
]
}
]
}
]
}
Here is my HTML that is generating the table:
<table>
<thead>
<tr>
<th ng-repeat="header in data.TableHeaders">
{{header.text}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.TableRows">
<td ng-repeat="cell in row.cells">
{{cell.text}}
</td>
</tr>
</tbody>
</table>
I want to be able to sort my data when I click on the headers. However, I have so far tried to set a sort variable to the id of the headers, using ng-click, and I can see that it updates the variable, but it doesn't sort the data. This was using ng-repeat="row in data.TableRows | orderBy: sortVar"
My sorting code:
// Initialise variable
$scope.sortVar = '0';
<!-- HTML snippet -->
<th ng-repeat="header in data.TableHeaders" ng-click="updateSort(header.id)"></tr>
// function
$scope.updateSort = function(id) {
$scope.sortVar = id;
}
Is there any way at all to be able to sort my dynamic tables? Am I going to need to add another value to my JSON data in order to do this?
I'm relatively new to angular, so not 100% sure how to achieve this.
If anything is unclear, let me know and I'll try to explain it a bit better.
Cheers
This sort is a bit complicated since it requires going into nested arrays and objects. Here is a sample of how it can be achieved using JavaScript Array's sort function:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.updateSort = function(index) {
$scope.data.TableRows = $scope.data.TableRows.sort(function(rowA, rowB) {
return rowA.cells[index].text.localeCompare(rowB.cells[index].text);
});
}
$scope.sortVar = '0';
$scope.data = {
"TableHeaders": [{
"id": "0",
"text": "Time"
}, {
"id": "1",
"text": "January"
}, {
"id": "2",
"text": "February"
}],
"TableRows": [{
"id": "0",
"cells": [{
"id": "0",
"text": "7:00"
}, {
"id": "1",
"text": "29"
}, {
"id": "2",
"text": "0"
}]
}, {
"id": "1",
"cells": [{
"id": "0",
"text": "8:00"
}, {
"id": "1",
"text": "18"
}, {
"id": "2",
"text": "83"
}]
}]
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th ng-repeat="header in data.TableHeaders" ng-click="updateSort($index)">
{{header.text}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.TableRows" >
<td ng-repeat="cell in row.cells">
{{cell.text}}
</td>
</tr>
</tbody>
</table>
</body>
</html>
I used Pagination Directive (it´s easy to use)
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
example:
http://www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls
Demo:
http://demo.expertphp.in/search-sort-and-pagination-angularjs-example/
I have an angular object, i have to show its records with filter and sorting. Also i have to show the records of unique values per keys within the object with checkbox.
I shows record with filter and sorting also i showed the unique values per key with checkbox.
Now i have to get the values of these checkbox per key.
Here is my code with plunker url below.
index.html
<body ng-controller="myController">
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input type="checkbox">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
See in plunker http://embed.plnkr.co/wblXhejmSWApBeCAusaI/
You can do like below example:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<h1>Filter Table</h1>
<label ng-repeat="option in structure.tabs">
<input type="checkbox" ng-model="option.selected">{{option.index}}
</label>
<table border="1" width="100%">
<tr>
<th ng-repeat="header in structure.tabs" ng-show="header.selected" ng-click="sortData(header.filter)">{{header.index}}</th>
</tr>
<tr ng-repeat="data in structure.info | orderBy:sortColumn:reverseSort">
<td ng-show="structure.tabs[0].selected">{{data.name}}</td>
<td ng-show="structure.tabs[1].selected">{{data.age}}</td>
<td ng-show="structure.tabs[2].selected">{{data.city}}</td>
<td ng-show="structure.tabs[3].selected">{{data.designation}}</td>
</tr>
</table>
<h1>Unique Values Table (per key)</h1>
<table border="1" width="100%" style="margin-top: 50px;">
<tr>
<th ng-repeat="header1 in structure.tabs" ng-show="header1.selected">{{header1.index}}</th>
</tr>
<tr>
<td ng-repeat="(hk, hv) in structure.tabs" ng-show="hv.selected">
<table border='1'>
<tr ng-repeat="(dk, dv) in structure.info | unique:hv.filter">
<td>
<input ng-model="item" type="checkbox" ng-change="getCheckedValues(item,dv,hv.filter)">{{dv[hv.filter]}}
</td>
</tr>
</table>
<br>
<button ng-click="getChecked(hv.filter)">Get Checked</button>
</td>
</tr>
</table>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller("myController", function ($scope,$log) {
$scope.sortColumn="name";
$scope.reverseSort=false;
$scope.sortData=function(column) {
$scope.reverseSort=($scope.sortColumn==column) ? !$scope.reverseSort : false;
$scope.sortColumn=column;
}
var array = []
array["name"] = [];
array["age"] = [];
array["designation"] = [];
array["city"] = [];
$scope.getCheckedValues = function(e,val,key){
console.log(val)
if(e){
array[key].push(e)
}else{
array[key].shift()
}
}
$scope.structure={
"tabs": [
{
"index": "Name",
"filter": "name",
"selected": true
},
{
"index": "Age",
"filter": "age",
"selected": true
},
{
"index": "City",
"filter": "city",
"selected": true
},
{
"index": "Designation",
"filter": "designation",
"selected": true
}
],
"info": [
{
"name": "Abar",
"age": "27",
"city": "Ghaziabad",
"designation": "Php Developer"
},
{
"name": "Abar",
"age": "27",
"city": "Okhla",
"designation": "Html Developer"
},
{
"name": "Nishant",
"age": "25",
"city": "Delhi",
"designation": "Angular Developer"
},
{
"name": "Amit",
"age": "30",
"city": "Noida",
"designation": "Android Developer"
}
]
};
$scope.getChecked = function(tab) {
alert("Need to get all checked value of key: "+tab);
console.log(array[tab])
}
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
Alright. Apologies for my previous answer I completely botched the question.
Anyhow I spent almost an hour trying to solve this and managed to do it using $scope.$$watchers[0].last and underscorejs.
//this is how getChecked looks like now
$scope.getChecked = function(tab) {
var selectedKey = tab.$$watchers[0].last;
_.each($scope.structure.info,function(row){
_(row).pairs().filter(function(item){
_.each(item,function(key){
if(key===selectedKey)
{
console.log(row);
return;
}
})
})
})
Above method is responsible for identifying the key and spitting in console, each time you select a key in below table. So check console.
The solution is on below plunkr.
https://embed.plnkr.co/kbiCwhW0RrdHtO3hVEEk/
I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this?
I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system.
JSON: 7 Buttons
[
{
"_comment": "Games",
"type": "button",
"id": "entertainmentButton",
"icon": "ion-film-marker",
"name": "Game and entertainment",
"topage": "servicePage.html",
"color": "white",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"backgroundcolor": "#0066FF",
"font-size": "26px"
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
}
]
JavaScript:
var myApp = angular.module('starter', []);
myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
''
]);
}]);
myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {
$http.get('myjsonfile.json').success(function (data) {
for(var i in data){
var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);
angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));
}
});
});
myApp.controller("OpenLinkCtrl", function ($scope) {
$scope.OpenLink = function () {
alert("Link open");
}
});
HTML:
<body ng-app="starter" class="padding" style="text-align: center">
<div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"></div>
<script type="text/ng-template" id="tpl">
<div class="col">
<a style="color:{{color}}; background-color:{{backgroundcolor}} " id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"> <i class="{{icon}}"><br></i>{{name}}</a>
</div>
</script>
</body>
What do I need to modify in HTMl-code that the Grid is responsive?
Edit:
It should look like here, e.g:
<div class="row responsive-sm">
<div class="col">
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
</div>
</div>
This code displays the buttons as follows:
on large screen size:
bit smaller:
very small:
Edited:
The solution:
<div ng-controller="generateHTMLCtrl" id="loadhere">
<script type="text/ng-template" id="tpl">
<a style="color:{{color}}; background-color:{{backgroundcolor}};"
id="{{id}}" class="{{type}}" href="{{topage}}"
ng-controller="{{controller}}" ng-click="{{function}}">
<i class="{{icon}}"><br></i>{{name}}
</a>
</script>
</div>
what you want is something more like this:
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="{{images[$index + 3].src}}" width="100%" />
</div>
</div>
This will create a maximum of 4 images per row that wrap and stack. You can also make it more or less images per by changing ng-if statement in for rows and then the amount of images in that row
When you are on every forth image, you are going to show the row class, thus creating a new row
you will pre-allocate four columns for you row, but you would first check to see if it will ever be filled to prevent an undefined exception
If the image exists at the specified index, then add it to the column
Edit!
Try this
add this css class:
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
then put this in your html:
<ion-content ng-controller="ExampleController" ng-init="loadImages()" class="gallery">
<span ng-repeat="image in images">
<img src="{{image}}" width="150px">
</span>
since ionic is built on built on top of flex box you can make a flexbox grid in ionic.
I would like to ask how will you show the "totals array" below the table Event AccountShop, Place and Activity? This code is working but I do have trouble inserting the "total" value in the Json" below the table.
table.html
<!DOCTYPE html>
<html ng-app="myTable">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
var myTable=angular.module('myTable',[]);
myTable.controller('tableCtrl',function($scope,$http){
$http.get("Table.json").success(function(response){
$scope.members=response.events;
});
});
</script>
</head>
<body ng-controller="tableCtrl">
<table border="5">
<tr>
<th>Event</th>
<th>Account Shop</th>
<th>Place</th>
<th>Activity</th>
</tr>
<tr ng-repeat="member in members">
<td>{{member.Event.id}}<br>
{{member.Event.account_id}}<br>
{{member.Event.shop_id}}<br>
<td>
{{member.AccountShop.id}}<br>
{{member.AccountShop.name}}<br>
{{member.AccountShop.short_code}}<br>
</td>
<div ng-repeat="Place in member.Place">
{{Place.id}}<br>
{{Place.name}}<br>
{{Place.lk_country_code}}<br>
</div>
</td>
<td>
<div ng-repeat="Activity in member.Activity">
{{Activity.id}}<br>
{{Activity.short_description}}
</div>
</td>
</tr>
<th>Total</th>
<td>
<div ng-repeat="total members.totals">
{{totals.totals.page}}
{{totals.current}}
{{totals.count}}
{{totals.prevPage}}
{{totals.nextPage}}
{{totals.pageCount}}
{{totals.order}}
{{totals.limit}}
{{totals.options}}
{{totals.paramType}}
</table>
</body>
</html>
Table.json
{
"events": [
{
"Event": {
"id": "59",
"account_id": "1",
"shop_id": "1",
},
"AccountShop": {
"id": "1",
"name": "Gill Divers Pte Ltd",
"short_code": "GILL"
},
"Place": [
{
"id": "537",
"name": "Pulau Dayang",
"lk_country_code": "MY"
}
],
"Activity": [
{
"id": "4011",
"short_description": "sample\r\n"
},
{
"id": "106",
"short_description": "sample\r\n \r\n"
},
{
"id": "1027",
"short_description": "sample\r\n"
}
]
}
],
"totals": [],
"paging": {
"page": 1,
"current": 50,
"count": 3621,
"prevPage": false,
"nextPage": true,
"pageCount": 73,
"order": [],
"limit": 50,
"options": [],
"paramType": "querystring"
}
}
You are missing the in in your ng-repeat. Try:
<div ng-repeat="total in members.totals">
And your totals array is empty:
"totals": []
But I think your real problem is that your trying to access the wrong property and the right property isn't even available on $scope.members
myTable.controller('tableCtrl', function($scope, $http) {
$http.get("Table.json").success(function(response) {
debugger
$scope.members = response.events;
// you need the paging property which isn't in the events array
$scope.totals = response.paging;
});
});
Hi I am having some categories displayed and I want to show create bookmark div when a particular category is selected and not when all of the categories are displayed.
I tried the following code.It hides the div even if I try to return hardcoded "true". Please let me know what I am doing wrong here !
http://codepen.io/anon/pen/pJRRvE
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
<a ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<!--CREATING -->
<div ng-if="shouldShowCreating()">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
Create Bookmark
</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app/eggly-app.start.js"></script>
</body>
angular.module('Eggly', [
])
.controller('MainCtrl', function ($scope) {
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks = [
{"id": 0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id": 1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id": 2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id": 3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id": 4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id": 5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id": 6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id": 7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id": 8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
$scope.isCreating = false;
$scope.isEditing = false;
function isCurrentCategory(category) {
return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
}
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.isCurrentCategory = isCurrentCategory;
$scope.setCurrentCategory = setCurrentCategory;
function shouldShowCreating() {
// return $scope.currentCategory && !$scope.isEditing;
return true;
}
})
;
The method shouldShowCreating is a "private" method of your controller and not part of the $scope. To access the method from your template, you need to change it to:
$scope.shouldShowCreating = function() {
return $scope.currentCategory && !$scope.isEditing;
}