I have a MEAN app generated by yeoman angular-fullstack that I have been trying to modify. I want to add a tab to the navigation bar, which upon clicking, will show additional items in a drop down.
Something like this:
http://getbootstrap.com/examples/navbar/
Here is my navbar.html file:
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<b>Cassmon</b>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in nav.menu" ng-class="{active: nav.isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li class="dropdown">
Metric Browser<span class="caret"></span>
<ul class="dropdown-menu" collapse="nav.isCollapsed()">
<li>Latency </li>
<li>Performance </li>
<li>Execution </li>
<li>All </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
And here is my navbar.controller.ts file:
'use strict';
class NavbarController {
//start-non-standard
menu = [{
'title': 'Home',
'link': '/'
},{
'title': 'Dropdown',
'link' : '/dropdown'
}];
$location;
Auth;
isAdmin;
getCurrentUser;
isLoggedIn;
isCollapsed = false;
//end-non-standard
constructor($location, Auth) {
this.$location = $location;
this.isLoggedIn = Auth.isLoggedIn;
this.isAdmin = Auth.isAdmin;
this.getCurrentUser = Auth.getCurrentUser;
}
isActive(route) {
return route === this.$location.path();
}
isCollapsed() {
return this.isCollapsed;
}
toggleCollpase() {
if (this.isCollapsed) {
this.isCollapsed = false;
} else {
this.isCollapsed = true;
}
}
}
angular.module('cassmonApp')
.controller('NavbarController', NavbarController);
When I build the app, I get this page but when I click the drowdown button I don't see the menu coming up. Any help would be appreciated.
Here are my package files:
bower.json
{
"name": "XXXXXXXX",
"version": "0.0.0",
"dependencies": {
"angular": "~1.5.0",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"bootstrap": "~3.1.1",
"bootstrap-social": "~4.9.1",
"angular-resource": "~1.5.0",
"angular-cookies": "~1.5.0",
"angular-sanitize": "~1.5.0",
"angular-route": "~1.5.0",
"angular-bootstrap": "~1.1.2",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.7.0",
"angular-validation-match": "~1.5.2",
"bootstrap-side-navbar": "^1.0.1",
"angular-datatables": "^0.5.4",
"angular-daterangepicker": "^0.2.2",
"angular-material": "^1.1.0",
"angular-messages": "^1.5.8",
"angular-chart.js": "^1.0.3"
},
"devDependencies": {
"angular-mocks": "~1.5.0"
}
}
package.json
{
"name": "XXXXXXXX",
"version": "0.0.0",
"main": "server/app.js",
"dependencies": {
"babel-polyfill": "^6.7.2",
"babel-runtime": "^6.6.1",
"bluebird": "^3.3.3",
"body-parser": "^1.13.3",
"composable-middleware": "^0.3.0",
"compression": "^1.5.2",
"connect-mongo": "^1.2.1",
"cookie-parser": "^1.3.5",
"dateformat": "^1.0.12",
"ejs": "^2.3.3",
"errorhandler": "^1.4.2",
"express": "^4.13.3",
"express-jwt": "^3.0.0",
"express-session": "^1.11.3",
"jsonwebtoken": "^7.0.0",
"lodash": "^4.6.1",
"lusca": "^1.3.0",
"method-override": "^2.3.5",
"mongoose": "^4.1.2",
"morgan": "~1.7.0",
"passport": "~0.3.0",
"passport-google-oauth20": "^1.0.0",
"passport-local": "^1.0.0",
"serve-favicon": "^2.3.0",
"socket.io": "^1.3.5",
"socket.io-client": "^1.3.5",
"socketio-jwt": "^4.2.0",
"uuid": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^6.0.0",
"babel-core": "^6.6.5",
"babel-register": "^6.6.5",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"del": "^2.0.2",
"gulp": "^3.9.1",
"gulp-add-src": "^0.2.0",
"gulp-angular-templatecache": "^1.7.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-typescript": "~2.13.0",
"gulp-typings": "^1.3.6",
"gulp-tslint": "^5.0.0",
"gulp-cache": "^0.4.2",
"gulp-concat": "^2.6.0",
"gulp-env": "^0.4.0",
"gulp-filter": "^4.0.0",
"gulp-imagemin": "^2.2.1",
"gulp-inject": "^4.0.0",
"gulp-istanbul": "~0.10.3",
"gulp-istanbul-enforcer": "^1.0.3",
"gulp-jscs": "^3.0.2",
"gulp-jshint": "^2.0.0",
"jshint": "2.9.2",
"gulp-livereload": "^3.8.0",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-clean-css": "^2.0.6",
"gulp-mocha": "^2.1.3",
"gulp-ng-annotate": "^2.0.0",
"gulp-ng-constant": "^1.1.0",
"gulp-node-inspector": "^0.1.0",
"gulp-plumber": "^1.0.1",
"gulp-protractor": "^2.1.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.0.0",
"gulp-rev-replace": "^0.4.2",
"gulp-sort": "^2.0.0",
"gulp-sourcemaps": "^1.5.2",
"gulp-svgmin": "^1.1.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.3",
"gulp-util": "^3.0.5",
"gulp-watch": "^4.3.5",
"grunt": "^1.0.1",
"grunt-build-control": "^0.7.0",
"isparta": "^4.0.0",
"utile": "~0.3.0",
"nodemon": "^1.3.7",
"run-sequence": "^1.1.0",
"lazypipe": "^1.0.1",
"wiredep": "^2.2.2",
"open": "~0.0.4",
"jshint-stylish": "^2.2.0",
"connect-livereload": "^0.5.3",
"istanbul": "~0.4.1",
"chai": "^3.2.0",
"sinon": "^1.16.1",
"chai-as-promised": "^5.1.0",
"chai-things": "^0.2.0",
"karma": "~0.13.3",
"karma-firefox-launcher": "^1.0.0",
"karma-script-launcher": "^1.0.0",
"karma-chrome-launcher": "^1.0.1",
"karma-jade-preprocessor": "0.0.11",
"karma-phantomjs-launcher": "~1.0.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-spec-reporter": "~0.0.20",
"sinon-chai": "^2.8.0",
"mocha": "^2.2.5",
"karma-mocha": "^1.0.1",
"karma-chai-plugins": "~0.7.0",
"phantomjs-prebuilt": "^2.1.4",
"proxyquire": "^1.0.1",
"supertest": "^1.1.0",
"tslint": "^3.5.0",
"typings": "^0.8.1"
},
"engines": {
"node": "^4.4.0",
"npm": "^2.14.20"
},
"scripts": {
"test": "gulp test",
"postinstall": "./node_modules/.bin/typings install",
"update-webdriver": "node node_modules/protractor/bin/webdriver-manager update",
"start": "node server"
},
"private": true
}
please make sure that you have linked bootstrap.js and jquery.js files and sometime there is issue with jquery version.
Angular and bootstrap fight each other due to bootstraps dependency on jQuery. Right now angular-bootstrap is trying to reconcile the two using ui bootstrap.
<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
</div>
Is from http://angular-ui.github.io/bootstrap/ This is where I would look for solutions.
If you are using angular cli you can:
first: npm install bootstrap#next
//install jquery, etc, too.
Then put this in your file angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js"
],
Issues:
When I set ace editor to html mode the tab key no longer tabs.
When I try and set options I get the following error message/s
misspelled option "enableLiveAutocompletion"
misspelled option "enableEmmet"
My bower.json looks like this
{
"name": "fountain-inject",
"version": "0.0.1",
"dependencies": {
"jquery": "^3.1.0",
"angular": "^1.5.0",
"angular-ui-router": "^0.3.1",
"angular-dragula": "^1.2.7",
"medium-editor": "^5.21.0",
"angular-ui-ace": "bower"
},
"overrides": {
"ace-builds": {
"main": ["src-noconflict/ace.js",
"src-noconflict/ext-language_tools.js",
"src-noconflict/theme-monokai.js",
"src-noconflict/mode-html.js",
"src-noconflict/ext-emmet.js"
]
},
"devDependencies": {
"angular-mocks": "^1.5.0"
}
}
}
and my code looks like this
_editor.setTheme("ace/theme/monokai");
_editor.getSession().setMode("ace/mode/html");
_editor.getSession().setOptions({
"enableBasicAutocompletion": true,
"enableSnippets": true,
"enableLiveAutocompletion": false,
"enableEmmet": true
});
And my html (which is a 'view')
<div class='parent' ng-controller='Main'>
<div class='wrapper'>
<div class='container' dragula='"fifth-bag"'>
<div data-type="a">A</div>
<div data-type="b">B</div>
<div data-type="c">C</div>
</div>
<div id="dragulaCopyWithSort" class='container' dragula='"fifth-bag"'>
</div>
<div ui-ace="{
onLoad: aceLoaded,
onChange: aceChanged
}">ace</div>
</div>
I receive a Json array from web service. This array contains others arrays.
How can I transform this structure to a one-level array to create a HTML table?
For instance, given this structure,
[
{
"uuid": "3f3f363d-322",
"name": "xxx",
"pay":[
{
"uuid": "123",
"number": "9791070",
},
{
"uuid": "124",
"number": "9791071",
}
]
}
]
... I want to change to this structure:
[
{
"uuid": "3f3f363d-322",
"name": "xxx",
"pay":
{
"uuid": "123",
"number": "9791070",
}
},
{
"uuid": "3f3f363d-322",
"name": "xxx",
"pay":
{
"uuid": "124",
"number": "9791071",
}
}
]
I tried to use ng-repeat and ng-if like this :
<tr ng-repeat="entry in entries >
<div ng-if="entry.pay.length>1">
<div ng-repeat=item in entry.pay">
<td>entry.uuid</td>
<td>pay.number</td>
</div>
</div>
Thanks
You can repeat <tbody> and within each <tbody> repeat <tr>.
Your html is invalid since <div> can't be child of <tr> or parent of <td>
<tbody ng-repeat="entry in entries" ng-if="entry.pay.length" >
<tr ng-repeat="item in entry.pay">
<td>entry.uuid</td>
<td>pay.number</td>
</tr>
</tbody>
except for some typos and missing braces your idea is correct, try:
<div ng-repeat="entry in entries >
<div ng-if="entry.pay.length>1">
<div ng-repeat="item in entry.pay">
<span>{{entry.uuid}}</span>
<span>{{item.number}}</span>
</div>
</div>
</div>
Furthermore its worth mentioning as said before that your html is invalid
I deployed a simple AngularJS app(which is working perfectly fine on local) into Heroku, then looks like "ng-repeat" stops working for some reason, there is no error from heroku logs. hopefully someone could give some hints.
project source:
run it on local:
npm installn.
node index.js
run it on heroku:
git clone
heroku create
git add .
git commit -m "initial commit"
git push heroku master
heroku ps:scale web=1
heroku open
index.js
var express = require('express');
var app = express();
var path = require('path');
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/scripts'));
app.use(express.static(__dirname + '/scripts/lib'));
app.use(express.static(__dirname + '/scripts/services'));
app.use(express.static(__dirname + '/scripts/controllers'));
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
index.html
<html ng-app="albumsApp">
<head>
<meta charset="utf-8">
<title>Albums Store</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!-- JS Libs -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="ekko-lightbox.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="lodash.min.js"></script>
<!-- modules / services / controllers -->
<script src="app.module.js"></script>
<script src="album_service.js"></script>
<script src="album.js"></script>
<script src="user.js"></script>
<!-- lightbox delegation -->
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
});
</script>
</head>
<body>
<h1>Albums Library</h1>
Search: <input ng-model="query" type="text"/>
<div ng-controller="albumCtrl">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th><a href="" ng-click="sortField = 'id'; reverse = !reverse" >Album ID</a></th>
<th>Album Title</th>
<th><a href="" ng-click="sortField = 'userId'; reverse = !reverse" >User Name</a></th>
</tr>
</thead>
<tr ng-repeat="album in albums | orderBy:sortField:!reverse | filter:query">
<td>{{album.id}}</td>
<td>
<div id="title_container" class="pure-g">
<div class="pure-u-3-5">{{album.title}}</div>
<div class="pure-u-1-5"><input type="checkbox" ng-model="shouldShow" /></div>
<div class="pure-u-1-5" ng-show="shouldShow">
<a href="{{album.url}}" data-toggle="lightbox">
<img ng-src="{{album.thumbnailUrl}}" class="img-responsive">
</a>
</div>
</div>
</td>
<td>{{album.userId}}</td>
</tr>
</table>
</div>
<!-- testing data
<div ng-controller="userCtrl" class="pure-u-1-2">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th><a href="" ng-click="sortField = 'id'; reverse = !reverse" >User ID</a></th>
<th><a href="" ng-click="sortField = 'name'; reverse = !reverse" >User Name</a></th>
<th>Email</th>
</tr>
</thead>
<tr ng-repeat="user in users | orderBy:sortField:!reverse | filter:query">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
</table>
</div>
-->
</body>
</html>
package.json
{
"name": "angularjs-study",
"version": "1.0.0",
"description": "project for AngularJS self-studying with fake data from JSONplaceholder & faker.js",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "4.13.3",
"gzippo": "^0.2.0",
"path": "^0.12.7"
},
"engines": {
"node": "0.12.7"
},
"repository": {
"type": "git",
"url": "git+https://github.com/igxz/angularjs-study.git"
},
"keywords": [
"angularjs",
"node",
"heroku",
"express"
],
"author": "Stephen Zhang",
"license": "MIT",
"bugs": {
"url": "https://github.com/igxz/angularjs-study/issues"
},
"homepage": "https://github.com/igxz/angularjs-study#readme"
}
scripts/services/album_service.js
angular
.module('albumsApp')
.factory('albumService', albumService);
function albumService($http){
return {
fetch_all_albums: function(){
return $http.get('http://jsonplaceholder.typicode.com/albums');
},
fetch_all_users: function(){
return $http.get('http://jsonplaceholder.typicode.com/users');
},
fetch_all_photos: function(){
return $http.get('http://jsonplaceholder.typicode.com/photos');
},
id_to_name: function(albums, users){
angular.forEach(albums, function(album){
var userName = _.select(users, function(u){
return u.id === album.userId;
})[0].name;
album.userId = userName;
});
},
add_photo_urls: function(albums, photos){
angular.forEach(albums, function(album){
var matchedPhoto = _.select(photos, function(p){
return p.albumId === album.id;
})[0];
var thumbnailUrl = matchedPhoto.thumbnailUrl;
var url = matchedPhoto.url;
// add key/value
album['thumbnailUrl'] = thumbnailUrl;
album['url'] = url;
});
}
};
}
Procfile
web: node index.js
I got screen shots of how output looks like both from local & heroku, bud I don't have enough reputation to post here : (
Solved
it's working on Netify with no code update, I guess it could be heroku env issue then, Netify makes process much easier
it can be accessed from http://json-placeholder-example.netlify.com/
If the ng-repeat was working before and stopped and no error is being thrown the most likely reason is that there's no data being retrieved. Test your data retrieval outside of the page to see if that's the case.
I need to set width of the autocomplete input in the Angular Kendo.
How can i do it programatically please?
Thanks for any help.
Setting it with an initial value, you should use style="width: 200px;".
Example:
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
If then you need to modify it, you should change the width via css method for wrapper element.
Example
$scope.my_autocomplete.wrapper.css("width", "300px");
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];
setTimeout(function() {
alert("Changing width");
$scope.my_autocomplete.wrapper.css("width", "300px");
}, 4000);
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames" style="width: 200px" />
</div>
</div>