I want to build a menu something like as below but I am not finding an appropriate sample utilising AngularJS 1.4, bootstrap & accordion.
Accordion is a must. Please advise.
menu1
menu2
submenu2.1
submenu2.2
sub-submenu2.2.1
sub-submenu2.2.2
menu3
I have added the code below. Style sheet is Bootstrap.css. Also some custom stylesheet used in project. Accordion menu elements should have different colours at each level of menu. Also the one selected should be displayed in different color. When we hover over elements it should display different color.
As per the below implementation I have 2 main level elements in menu. The first element is displaying proper accordion behaviour. Second element is always open.
No stylesheet is getting applied to either of the menu elements. Please advise.
HTML:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled">
<uib-accordion-heading ng-if="c.pDtos">
{{c.name}}
</uib-accordion-heading>
<div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading>
{{p.name}}
</uib-accordion-heading>
<div ng-show="p.aDtos" ng-repeat="a in p.aDtos">
<a ui-sref="crhDetail({ crhId : a.crhId})">{{a.name}}</a>
</div>
</uib-accordion-group>
</script>
<div class="menuSec" ng-controller="menuCtrl">
<uib-accordion close-others="true">
<div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" >
</div>
</uib-accordion>
</div>
Custom CSS:
.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
.menuSec>ul {position: absolute;background:#2166b3;width:100%;}
.menuSec>ul>li, .secondLevelList>li, .thirdLevelList>li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
.secondLevelList, .thirdLevelList{width:220px;}
.secondLevelList>li, .thirdLevelList>li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
.selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
.secondLevelList>.selected{background:#004388;}
.menuText{position:absolute;text-align:right;right:47px;}
.menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
.menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
.secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
.secondLevelList{margin-right:-14px;}
.thirdLevelList{margin-right:-24px;}
.secondLevelList>li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
.selected>.secondLevelList>li:hover{background:#004388 !important;}
.secondLevelList>li:hover{background:#003b78;}
.thirdLevelList>li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
.thirdLevelList>li:hover{background:#003871 !important;}
.thirdLevelList>.selected, .thirdLevelList>.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
.menuSecCT{width:80px;overflow:hidden;}
.menuSecCT .menuText{display:none;}
.menuSec ul li{padding-right:34px;}
.secondLevelList, .thirdLevelList{display:none;}}
Here is an example of multi-level (3 levels) UI Bootstrap accordion. You have to adapt to your needs.
This example is based on ng-include:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group>
<uib-accordion-heading ng-if="menu.listChilds">
{{menu.label}}
</uib-accordion-heading>
<div ng-repeat="submenu in menu.listChilds" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading >
{{submenu.label}}
</uib-accordion-heading>
<div ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
{{item.label}}
</div>
</uib-accordion-group>
</script>
<div ng-controller="MenuController">
<uib-accordion close-others="oneAtATime">
<div ng-repeat="menu in items" ng-include="'menuTree'"></div>
</uib-accordion>
</div>
http://plnkr.co/edit/ERURCsdvjhts1ujkYTrz?p=preview
Related
The default hide directive with angular-formly is ng-if which can be configured via e.g. the formlyConfigProvider.
Currently all my fields should always be shown and I don't want to have unneccesary ng-if="!field.hide" checks rendered that can inpact the performance.
How can I tell formly not to use this check per field/form or globally?
ng-if add and remove elements from the DOM, when you want to show and hide large number of elements it can be slow, insted you can use ng-show.
ng-show will only change the visibility of the element.
<html lang="en" itemscope="" itemtype="http://schema.org/Article">
<head>
<script>
var oModelesDep = [];
</script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://s3.amazonaws.com/gowpres/resources/js/utils/jquery-1.10.2.js"></script>
<!-- Angular Material Library -->
<script src="https://www.weldpad.com/starterkit.js?containerId=60515"></script>
<script data-meta="61021" src="https://www.weldpad.com/sogettopanswerers.html?containerId=61021"></script>
</head>
<body ng-controller="AppCtrl" ng-app="MyApp">
<h4 ng-init="showchat = true">Your - Starter Kit</h4>
<button ng-click="showchat = false">hide</button>
<button ng-click="showchat = true">show</button>
{{showchat}}
<sogettopanswerers ng-show="showchat" tag="html">
<div ng-repeat="qdata in listqdata.items track by $index" style="background-color: white;">
<div class="well" style="overflow: auto;">
<h2>
<a href="{{qdata.link}}" class="question-hyperlink">
{{qdata.title}}
</a>
<small>{{qdata.view_count}} Views</small></h2>
<contentashtml ng-init="load()" content="qdata.body">
</contentashtml>
<div style="padding:15px;display: inline-block;vertical-align: top;">
<p>Name: {{qdata.owner.display_name}}</p>
<a href="{{qdata.owner.link}}">
<img ng-src="{{qdata.owner.profile_image}}" alt="Description"/>
</a>
</div>
<div style="display: inline-block;">
<p>Created: <span am-time-ago="qdata.creation_date * 1000"></span></p>
<p>
Last Update:<span am-time-ago="qdata.last_activity_date * 1000"></span>
</p>
<p>
Answered:{{qdata.is_answered}}
</p>
</div>
<p>
Answers:{{qdata.answer_count}}
</p>
</div>
</div>
</sogettopanswerers>
</body>
</html>
Look at the line:
<sogettopanswerers ng-show="showchat" tag="html">
and see how fast the response is.
you set hide-directive="ng-show" in the formly-form
<formly-form hide-directive="ng-show"></formly-form>
"hide-directive
Allows you to control the directive used to hide fields. Common value for this might be ng-show. It will be passed !field.hide. You can also specify this on a global level using formlyConfig.extras.defaultHideDirective = 'ng-show'"
http://docs.angular-formly.com/docs/formly-form
So you can either set it as I instructed or you can choose to edit it in the config on startup for all fields
In ionic i want to show multiple images in a single row. right now it shows only one image that took the entire width.My requirement is showing below as an image
ion-slidebox is deprecated. Use ion-slides that uses Swiper. The minimum IONIC version required would be 1.2.
Here's a post I wrote that you could use to implement it
Btw, ion-slides uses the awesome SwiperJs, so for your requirement, in your controller when you define the swiper, you could just use their slidesPerView and set it to a number of slides that you want to show like below!
$scope.swiperOptions = {
/* Whatever options */
effect: 'slide',
initialSlide: 0,
slidesPerView: 3,
/* Initialize a scope variable with the swiper */
onInit: function(swiper){
$scope.swiper = swiper;
// Now you can do whatever you want with the swiper
},
onSlideChangeEnd: function(swiper){
console.log('The active index is ' + swiper.activeIndex);
}
};
</div>
<ion-slide ng-controller="HomeCtrl" ng-init="';ary1=[0,1,2];ary2=[3,4,5];ary3=[6,7,8]">
<ion-slide-box show-pager="false" auto-play="false" style="width:100%" does-continue="false">
<ion-slide ng-repeat="i in [1,2,3]" style="height:180px;">
<div ng-if="i==1" ng-repeat="n in ary1" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==2" ng-repeat="n in ary2" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==3" ng-repeat="n in ary3" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-slide>
I use accordion in my angularjs project.
I want to make headers rows in accordion even odd diffrent color.
Here is my view template:
<div class="container">
<div id="accordionWrapper">
<accordion close-others="true">
<!-- All Remaining Groups -->
<accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
<accordion-heading>
<div class="text-center">
<strong>{{inspection.inspItemDesc}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</div>
</accordion-heading>
<div class="col-md-3 col-xs-6 small">
<label>fix type: </label> {{inspection.inspItemDesc}}<br>
</div>
<div class="col-xs-12"><hr></div>
</accordion-group>
</accordion>
</div>
</div>
Here how it looks in the view:
And here is my desired view:
I tryed to add this rows :
ng-class-odd="'blueStyle'"
ng-class-even="'greenStyle'"
To this row:
<accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
But I didn't get desired result.
Any idea How can I make odd even rows to be in diffrent colors in accordion bootstrap?
With CSS3 nth-child() selector,something like this should work:
accordion-group:nth-child(odd) {
/*background: #ff0000; your style here*/
}
accordion-group:nth-child(even) {
/*background: #0000ff;your style here*/
}
Update:
But as Micheal said it doesn't work ! Because there is no <accoridon-group > tag at all , instead code below will be generated:
<div class="panel panel-default" heading="Dynamic Group Header - 1" ng-repeat="group in groups">
<div class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title"></h4>
...
</div>
</div>
So we have .panel-default and .panel-heading:
.panel-default > .panel-heading:nth-child(odd){
background:#00f5f5;
}
Up to now our styling works but due to nth-child CSS selector hierarchy issues all our target elements will be affected .
We have to act better:
.panel-default:nth-of-type(odd) .panel-heading{
background:#00f5f5;
}
It works as charm.
More about nth-of-type()
Refer this for Odd row color class
https://docs.angularjs.org/api/ng/directive/ngClassOdd
Refer this for Even row color class
http://docs.angularjs.org/api/ng.directive:ngClassEven
Similar answer in Stackoverflow
click here
The ng-class-odd and ng-class-even attributes work with the standard Bootstrap 3.3.6 CSS classes.
ng-class-odd="'panel-info'" <!-- blue panel class -->
ng-class-even="'panel-success'" <!-- green panel class -->
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"
ng-class-odd="'panel-info'" ng-class-even="'panel-success'">
The DEMO on PLNKR.
I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr
See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
I am a noice programmer and new to the Ionic Framework and Angular.js. I am developing a mobile app using Ionic primarily "out of the box". But, I'd like to display an Ionic list that combines a:
checkbox
item content (e.g. string of text)
avatar (i.e. an image associated with the item)
See mockup below...
A streamlined example of the HTML markup looks like this:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Combine Checkbox & Avatar in List</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #1
</li>
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #2
</li>
</ul>
</ion-content>
</ion-pane>
But the page is displayed like so:
My questions:
Does the Ionic Framework support this combination (combining a checkbox and an avatar image in a list item)?
If so, what markup or code (HTML, CSS, JS) can I use to render this type of display?
You can see code with a simple example here:
Plunker Example Code
Appreciate guidance and direction from the Stackoverflow community!
I think that you won't be able to achieve that with Ionic default CSS. Maybe you should work on some css to adjust some positions due to CSS incompatibilities between these elements. However, I could reach something very close to what you showed. Put the following item in your plunker code and give it a try:
<li class="item item-avatar-right item-checkbox">
<img src="http://placehold.it/100x100">
<label class="checkbox">
<input type="checkbox">
</label>
<h2>Headline</h2>
<p>Description</p>
</li>
I was able to combine the item-avatar class with a checkbox by placing the checkbox on the right (using the item-checkbox-right class) and by overriding the min-height with 0.
My HTML:
<ion-content class="list">
<ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
<img ng-src="{{user.picture}}">
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</ion-checkbox>
</ion-content>
I also had to add the following CSS rule:
.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
min-height: 0;
}
I got a result like the following:
I was working on a solution for the same problem and i came up with this css class : item-checkbox-img
Just add it to the img tag in your ion-checkbox
You can see the result in this codepen, the image is resized and its absolute position places it to the right of the item
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
vertical-align: middle;
position: absolute;
top: 0px;
right: 15px;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Toggles</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-list style="height: 2000px">
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/350x150">
</ion-checkbox>
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/100x100">
</ion-checkbox>
</ion-list>
</body>
</html>