I was looking for a angular/bootstrap non javascript solution to have a collapsible bootstrap column..
Here's what I came up with when I couldn't find another solution online.
It was important to me to not use jquery (don't want to clutter up my controller with UI stuff)
It's not rocket science, but I spent a while looking for a bootstrap solution and came up dry.
<button ng-click="showAddDiv = !showAddDiv">Show</button>
<div class="container-fluid">
<div class="row">
<div class="material-color-primary-1 col-xs-12" ng-class="{true:'col-lg-8', false:'col-lg-12'}[showAddDiv]" ng-init="showAddDiv = false">
</div>
<div class="material-color-secondary-1" ng-class="{true:'col-xs-12 col-lg-4', false:'hidden'}[showAddDiv]">
'add div'
</div>
</div>
</div>
Related
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.
I've seen this question and seen it answered but not in any way I can use or understand. The question is very specific and simple but somehow the answers are a bit over my head.
All I want to do is have a very simple menu work. when i menu item is clicked, I need it to of course use my angular controller function to handle it. I want all of that on the angular side. It actually does work when I simply use the elements directly without declaratively making my own.
So this works just fine and my ng-click is successfuly calling my acceptedSelect() in my controller:
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
But i do the same thing by wrapping the paper element in a polymer-element, it doesn't work. So this will not work:
<polymer-element name="my-app" attributes="refresh">
<template>
<style>
...
</style>
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
</template>
<script>
Polymer('my-app', {
});
<my-app></my-app>
I'm just not sure what I can do to make this work. Any help is greatly appreciated.
I am building a wizard in angular using the angular-ui bootstrap modal component.
In my main page, I am already using ng-views for navigation.
The goal is to create a modal wizard on one of these pages. As far as I can see,
nested ng-views are not supported. If possible, I would like to keep each step of
the wizard as an external resource.
A terrible way to accomplish this at the moment is something to this effect:
<div id="wizardModal" class="modal hide">
<div class="modal-header">
<div ng-show="isCurrentStep(1)">
<p>Step1 header</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 header</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 header</p>
</div>
</div>
<div class="modal-body">
<div ng-show="isCurrentStep(1)">
<p>Step1 body</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 body</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 body</p>
</div>
</div>
<div class="modal-footer">
<div ng-show="isCurrentStep(1)">
<p>Step1 footer</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 footer</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 footer</p>
</div>
</div>
</div>
Obviously, the above is unacceptable and will create maintenance nightmares.
Is there a clean approach to accomplishing the same effect?
Using ng-include worked like a charm, thanks.
You can find a tutorial about creating a wizard-style app using ng-view and ngRouter here.
I believe this approach is much better since you can have individual controllers per step that inherit the scope from the host form thus keeping all the data but separating the logic.