229 comments found.
Hi. I have an issue. When I try to print any page with window.print command, it only prints the first page. The other pages are not getting print. The print preview also shows the first page with the scroll bar to other pages, but it doesn’t get scrolled. Looks like some css fix is required. Please provide the solution as soon as possible. Thanks.
Hi
which is the method to use $translate service on ui router to translate title pages?
You can translate in the view. ng-bind=”$state.current.data.title | translate”
http://stackoverflow.com/questions/28760904/how-to-change-html-title-tag-dynamically-and-translated-to-languages-in-angularjDo you plan to have any updates to this theme or its done?
No updates for now. Thanks
Hello, I have purchased this template; product code: cb41fc25-d93e-45ed-93eb-401b23b2e169
Unfortunately the angular version is not working. I got this when executed; npm start: * http://127.0.0.1:8080/ Index of / Node.js v7.3.0/ ecstatic server running @ 127.0.0.1:8080 I have followed the steps recommended: 1: Install Node.js and NPM on your computer 2: Run command “npm install -g bower grunt-cli” 3: Run “bower install” to install dependencies 4: Run “grunt build:angular” to build project 5: Run “npm start” to start server- Run “grunt build:angular” to build app with minified css and js.
- Preview without Build>
I have other angular applications in my environment working with no problem.
Could you please give me an advice to have it working or more detailed steps?
Thanks in advance, Julio
Is there any js error?
hi
im Daniele and i bought your product materil (it is a grat job!) i write you because i need to upgrade the angular-material library inside the project i tried to update it but i lost same style of materil (mainly colors) can you help me?
tnx in advance Daniele
You can update angular-material module and the mainly colors is in app.css. no related to the angular-material module
Hi, I really like the theme and want to use it. I have 3 important priorities for my project: 1. Making an angular single page application. 2. Using Data tables. this is the highest priority.I have to use this. I’m not sure how you guys are integrating datatables into angular version. There are similar plugins in angular but none can match data tables in terms of functionality. you mention that 70% of jquery, plugins work without directives but i need a bit more clarity on how you manage to support data tables inside of angular spa. ( would it be a separate html page ?) 3. using sass/scss for css. (tip:You guys should seriously consider sass/scss , thats the future.)
I see that flatkit has scss support but it doesnt have material design theme. You guys are leaving me something or the other missing in choosing a theme.
Do let suggest the best approach i can take without compromising on either datatables or angular spa.
Also i have other questions. What all in included in this packages.?
Btw , beautiful design guys.
I have a problem, project does not work 
Sorry it works, there is a way to generate the project in clean
Hi Team,
I stuck while building building app with below error:
‘Running “clean:angular” (clean) task Verifying property clean.angular exists in config…ERROR >> Unable to process task. Warning: Required config property “clean.angular” missing. Use—force to contin ue.
Aborted due to warnings.’
Please help me in this, What would be the solution to proceed further.
— Regards, Sathya
module.exports = {
angular: ['angular/*'],
html: ['html/*'],
tmp: ['.tmp', '**/.DS_store']
};
Hi Team,
We need clarification on purchasing product. Here are the few points please clarify. http://flatfull.com/themes/materil/angular/#/app/dashboard 1. Are we getting complete bundle of product (html,css,javascript,materialdesign, angular js and etc..) 2. If we want to edit/extend the functionality , is Regular license is enough? 3. will it cost any further amount. If we want to edit/extend the code as we need. 4. I read terms and condition little confused. – If we purchase regular license, Will the packge/bundle of code is for life time or only for 6 months. 5. If we purchase regular license, Apart from support, can we use the template for lifetime ..?Thanks and Regards, Sathya
1. Yes. all these (html,css,javascript,materialdesign, angular js and etc..) are included.
2. Regular license is enough. unless you want to distribute your product, eg. selling the product, than you need a extended license.
3. You can do what you want, no more further cost.
4. The 6 months is for support, eg, issue/bug.
5. You can use it for lifetime. but one license for one project. if you want to use it in two projects, you need two separate license.
Thanks
Is the Materil theme available in Angular 2?
No angular2 version. Thanks
I created a controller that starts an application on the page, but when I go out and come back, starts a new application with the previous running, and if I leave the page and come back again, a third starts. The page when accessed generates a new application, instead of having just one. This application takes and sends data via json, and each time I perform an action, is sent or received the same amount of time you accessed the page. How to fix it? How do I access the particular page, has only one running application?
What’s your controller code?
I am trying to load files of datatable, using ‘dataTable’ in resolve, but not works: ‘dataTable’ is in config.lazyload.js, but don’t works
.state('app.dados', {
url: '/dados',
templateUrl: 'views/pages/dashboard.wall.html',
data : { title: 'Dados', folded: true },
controller: 'DataTableCtrl',
resolve: load(['dataTable', 'js/myfile.js'])
})What’s js error did you got?
The load() function can not load the datatable. it’s not a angular module.
replace the load function to quick fix. (app/scripts/config.router.js)
function load(srcs, callback) {
return {
deps: ['$ocLazyLoad', '$q',
function( $ocLazyLoad, $q ){
var deferred = $q.defer();
var promise = false;
var name;
srcs = angular.isArray(srcs) ? srcs : srcs.split(/\s+/);
if(!promise){
promise = deferred.promise;
}
angular.forEach(srcs, function(src) {
promise = promise.then( function(){
name = src;
angular.forEach(MODULE_CONFIG, function(module) {
if( module.name == src){
if(!module.module){
name = {serie: true, files: module.files}
}else{
name = module.name;
}
}
});
return $ocLazyLoad.load(name);
} );
});
deferred.resolve();
return callback ? promise.then(function(){ return callback(); }) : promise;
}]
}
}
I m trying to use function initComplete in datatable, but it not works, how can I call alert after datatable complete?
app.controller('dtCtrl', ['$scope', function ($scope) {
$scope.initComplete = function(data){
alert('teste');
};
}]);<table ng-controller="dtCtrl" ui-jp="dataTable" ui-options="{
sAjaxSource: 'app/api/datatable.json',
bProcessing: true,
aoColumns: [
{ mData: 'engine' },
{ mData: 'browser' },
{ mData: 'platform' },
{ mData: 'version' },
{ mData: 'grade' }
]
}" class="table b-t b-b table-hover" />
<table ng-controller="dtCtrl" ui-jp="dataTable" ui-options="{
sAjaxSource: 'app/api/datatable.json',
bProcessing: true,
initComplete: initComplete,
aoColumns: [
{ mData: 'engine' },
{ mData: 'browser' },
{ mData: 'platform' },
{ mData: 'version' },
{ mData: 'grade' }
]
}" class="table b-t b-b table-hover" />
When I put a button via javascript, the effect of md-ink-ripple does not work. How can I activate this effect?
Error: Can’t find variable: Waves I created a controller, and I’m calling it Waves.attach but is not recognizing the Waves variable.
If you are using the angular version. you need add <md-button>, the Waves is for jQuery.
On the “analysis.html” is not carrying the “plot”, and is showing this error in Error console:
Error: [$parse:syntax] Syntax Error: Token ‘}’ not a primary expression at column 546 of the expression [[[ { data: [[1,7.5],[2,7.5],[3,5.7],[4,8.9],[5,10],[6,7],[7,9],[8,6],[9,8],[10,9]], points: { show: true, radius: 4, lineWidth: 3, fillColor: ’#7e57c2’}, lines: { show: false, lineWidth: 0, fill: 0.5, fillColor: ’#7e57c2’ }, color:’#fff’ } ], { series: { shadowSize: 0 }, xaxis: { show: true, font: { color: ’#ccc’ }, position: ‘bottom’ }, yaxis:{ show: true, font: { color: ’#ccc’ }*}, grid: { hoverable: true, clickable: true, borderWidth: 0, color: ’#ccc’ }, tooltip: true, tooltipOpts: { content: ‘%x.0 is %y.4’, defaultTheme: false, shifts: { x: 0, y: -40 } } }]] starting at [}, grid: { hoverable: true, clickable: true, borderWidth: 0, color: ’#ccc’ }, tooltip: true, tooltipOpts: { content: ‘%x.0 is %y.4’, defaultTheme: false, shifts: { x: 0, y: -40 } } }]]. http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7D&p1=not%20a%20primary%20expre...How to fix it?
I solved the problem, thanks
Fantastic theme! I’d really like to purchase, but will this support Angular 2 in the future?
I will look into it. Thanks
Dear how do I use the angled version … Its theme does not have complete documentation
The angular version located in “app/” folder. docs in “html/page.document.html”
Thanks
Hi, when are you coming up with an angular2 version of this theme. Or let’s say if we continue with this theme in angular1, how much effort or how difficult it will be to implement or switch to angular2
Angular2 is total new from angular1. we still working on it. Thanks
Thanks Guys, any approximate idea when will it be ready? Thanks again
Will release a angular2 admin template in October.
Hi, are you work with custom job? I have a project on Angular and need developers, which know AngularJS. What is your rate?
I need to do integration with the backend, display the data on the page and configure logic. The layout of the tables we already made, it remains only to populate it with data.
Working on the updates, no time for custom work. Thanks
<li ui-sref-active="active">
<a md-ink-ripple="" ng-repeat="serv in services" ng-if="serv.items.length>0">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">{{serv.items.length}}</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal">{{serv.module}}</span>
</a>
<ul class="nav nav-sub">
<li ui-sref-active="active">
<a md-ink-ripple="">Something</a>
</li>
<li ui-sref-active="active">
<a md-ink-ripple="">List</a>
</li>
<li ui-sref-active="active">
<a md-ink-ripple="">Register</a>
</li>
</ul>
</li>
Just placing ng-repeat in an item totally breaks the menu dropdown. I tested if maybe the items received from the controller are empty or are objects, but no, I place plain JSON objects in the controller and they are good, even if I do ng-repeat=”items in [1,2,3,4]” the dropdown stops working and items are never displayed, it doesn’t even try expand the items list, and also no errors are returned.
Also please, what css do I have to change to make the left menu wider when its not folded? regards
Also please, what css do I have to change to make the left menu wider when its not folded? regards
You need repeat on the li tag.
Edit the “app/less/variables.less”, change @aside-width to a big size, and use grunt build:angular to regenerate the app.css file.
<li ui-sref-active="active" ng-repeat="serv in services" ng-if="serv.things.length>0">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">{{serv.things.length}}</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal">{{serv.module}}</span>
</a>
<ul class="nav nav-sub">
<li ui-sref-active="active" ng-repeat="item in serv.things track by $index">
<a md-ink-ripple="">{{$index}}</a>
</li>
</ul>
</li>
This is the array in angular made by hand to test:
$scope.prepareMenu = function(){
var userInfo = Api.coreInfo.query();
userInfo.$promise.then(function(info) {
var data = info.info;
$scope.account = {
firstname:data.acc.name,
surname:data.acc.surname,
email:data.acc.email,
accountId:data.acc.accountId,
date:data.acc.created
};
$scope.company = data.acc.sentinelCompany;
$scope.services = [{module:"DASHBOARD",things:[]},{module:"TEST",things:["ITEM1","ITEM2"]}];
console.log($scope.services);
});
};
The variables are been accessed from the view, I can see in the menu the “TEST” item and the small number icon with “2” which is the things array length.
<li ui-sref-active="active" ng-repeat="serv in services" ng-if="serv.things.length>0">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">{{serv.things.length}}</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal">{{serv.module}}</span>
</a>
<ul class="nav nav-sub">
<li ui-sref-active="active" ng-repeat="item in serv.things">
<a md-ink-ripple="">{{$index}}</a>
</li>
</ul>
</li>
without track by $index and with it doesn’t make the togle menu item work.
I have the parent element placed as expected which is the parent menu item “TEST” inside of it are 2 elements 0 and 1, this is the html output
<li ui-sref-active="active" ng-repeat="serv in services" ng-if="serv.things.length>0" class="ng-scope">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg ng-binding">2</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal ng-binding">TEST</span>
</a>
<ul class="nav nav-sub">
<!-- ngRepeat: item in serv.things --><li ui-sref-active="active" ng-repeat="item in serv.things" class="ng-scope">
<a md-ink-ripple="" class="ng-binding">0</a>
</li><!-- end ngRepeat: item in serv.things --><li ui-sref-active="active" ng-repeat="item in serv.things" class="ng-scope">
<a md-ink-ripple="" class="ng-binding">1</a>
</li><!-- end ngRepeat: item in serv.things -->
</ul>
</li>
<li ng-repeat="serv in services" ng-if="serv.items.length==0">
<a md-ink-ripple="" ng-click="addTab('app.{{serv.module}}','{{serv.module}}')">
<i class="pull-right up"><b class="badge bg-danger">NEW</b></i>
<i class="icon mdi-action-dashboard i-20" />
<span>{{serv.module}}</span>
</a>
</li>
<li ng-repeat="serv in services" ng-if="serv.items.length>0" ui-sref-active="active">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">2</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal">{{serv.module}}</span>
</a>
<ul class="nav nav-sub">
<li ui-sref-active="active" ng-repeat="item in serv.items">
<a md-ink-ripple="">{{item}}</a>
</li>
</ul>
</li>
This is the final HTML with exactly the elements stored in the array but the problem remains, after click on an item to expand, it does nothing:
<li ng-repeat="serv in services" ng-if="serv.items.length>0" ui-sref-active="active" class="ng-scope">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">2</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal ng-binding">TEST</span>
<div class="md-ripple-container" /></a>
<ul class="nav nav-sub">
<!-- ngRepeat: item in serv.items --><li ui-sref-active="active" ng-repeat="item in serv.items" class="ng-scope">
<a md-ink-ripple="" class="ng-binding">ITEM1</a>
</li><!-- end ngRepeat: item in serv.items --><li ui-sref-active="active" ng-repeat="item in serv.items" class="ng-scope">
<a md-ink-ripple="" class="ng-binding">ITEM2</a>
</li><!-- end ngRepeat: item in serv.items -->
</ul>
</li>
<nav ui-nav>
The ui-nav.js is the directive to toggle the nav.
<nav ui-nav>
<ul class="nav">
<li ui-sref-active="active">
<a md-ink-ripple="">
<span class="pull-right text-muted">
<i class="fa fa-caret-down" />
</span>
<i class="pull-right up"><b class="badge no-bg">3</b></i>
<i class="icon mdi-maps-directions-car i-20" />
<span class="font-normal" translate="">navbar.VEHICLES</span>
</a>
<ul class="nav nav-sub">
<li ui-sref-active="active">
<a md-ink-ripple="" translate="">navbar.MAP_VIEW</a>
</li>
<li ui-sref-active="active">
<a md-ink-ripple="" translate="">navbar.LIST</a>
</li>
<li ui-sref-active="active">
<a md-ink-ripple="" translate="">navbar.REGISTER</a>
</li>
</ul>
</li>
</nav>
<code /></ul></code>
The last code tag is a typo writting this post not inside the code
So? if <nav ui-nav> is in the code, why It failed each time I place an ng-repeat statement in the code? Do you maybe have a clue? does it maybe has something to do with $timeout problem in bootstrap? Maybe by the time the directives are loaded and applied to the menu the items doesn’t exist so when are appended to the main menu they come without the toggle function, or something like that, I really need you to get a a look on this please, would be great if you could maybe lead me to get a clue or a small workaround. regards
<li ng-repeat="serv in services"> <a ui-nav-item>and change the ui-nav.js to
angular.module('app')
.directive('uiNavItem', ['$timeout', function($timeout) {
return {
restrict: 'AC',
link: function(scope, el, attr) {
$timeout(function () {
el.on('click', function(e) {
var li = angular.element(this).parent();
var active = li.parent()[0].querySelectorAll('.active');
li.toggleClass('active');
angular.element(active).removeClass('active');
});
})
}
};
}]);
