I would like to animate a md-button when I add a md-progress-circular inside it.
<div class="layout-row layout-align-center-center" ng-init="label = true">
<ng-button class="btn btn-default-rb center-block rb-margin-top-a"
ng-click="label = !label"
layout="row"
style="background-color: #FF8800;">
ng-button
<md-progress-circular ng-if="!label"
md-mode="indeterminate"
class="md-hue-2 rb-margin-left-a"
md-diameter="20px"></md-progress-circular>
</ng-button>
</div>
You can see the example here:
http://plnkr.co/edit/LkAQ92OztNgbEjztHvCS?p=preview
My idea is to show this progress when I post some data. The progress bar is showed, but I would like to show an animation while the button is resized, like the ladda expand right (http://lab.hakim.se/ladda/).
Could you help me?
Related
I'm using ngFx for my animations in an angular app (and new to the world of angular)
ngFX is great - seems very easy to use, but I want to improve how it deals with resizing the containing element.
Easy to see below, upon removal of the image the containing div instantly resizes - I want that to be smooth, i.e. it takes 1 sec to resize instead of that instant jump.
Not sure where to start fixing this issue.
Thanks
<div class="well well-lg">
<h1 style="margin-bottom: 20px">NG SHOW</h1>
<button style="margin-bottom: 20px" type="button" class="btn btn-primary btn-sm" ng-click="showdog = !showdog">TOGGLE</button>
<br>
<img class="fx-fade-up-big" ng-show="showdog" src="http://vignette4.wikia.nocookie.net/simpsons/images/7/77/200px-SantasLittleHelper.png/revision/20090712224020" >
</div>
I am using angular material to create my site. I would like to display my products in a grid list with each tile has a dynamic height so that the result should be in like this page https://www.tumblr.com/search/printify.
I tried to do something like
<div class="md-padding" layout="row" layout-xs="column" layout-wrap>
<div flex-xs="50" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="n in [0,1,2,3]">
<md-card md-whiteframe="4" ng-repeat="result in result[n] | limitTo:limit" >
......
</md-card>
</div>
</div>
it works fine in 4-col display. however when resizing the screen to md and display in 3-col, the 4th-column is display under the 1st-column and quite ugly.
I hv tried on Grid-list too but no clue, may anyone can help, please?
I'd recommend using md-grid list. I edited Codepen from the Angular Material site here: http://codepen.io/anon/pen/qZzmpa and added a card to the tiles. With just:
<md-card>
<md-card-content>
Hi I'm a card
<md-card-content>
<md-card>
inside the tiles and it's pretty close.
https://material.angularjs.org/latest/demo/gridList
On the process of trying to learn angularjs, I am creating a set of divs using ng-repeat. I have five divs in all. I am only displaying the first div using $firstdirective component.
<div class="container" ng-app="demoApp" ng-controller="demoController">
<div class="row" ng-repeat="job in jobs" ng-hide="!$first">
<div class="col-md-4">
{{job}}
</div>
<div class="col-md-4">
<button class="btn-primary btn-xs add" ng-click="showNext($event)" ng-hide="$last">Add</button>
<button class="btn-primary btn-xs delete" style="display: none;">Delete</button>
</div>
</div>
</div>
That works.
Now, each div has two buttons, Add and Delete. When I click add I want to hide the add button and delete button of the current row and open the next row. So I wrote,
$scope.showNext = function(evt) {
var elm = evt.target;
$(elm).hide();
$(elm).next().hide();
$(elm).closest("div.row").next().slideDown();
};
This is not working as ng-hide is overriding my slideDown. What is the angularjs way of doing it?
Also I would like the delete button only on the $last visible row && !first. How to find last visible row in ng-repeat?
Fiddle: https://jsfiddle.net/codeandcloud/u4penpxw/
You shouldn't manipulate the DOM with things like $(elm).hide();, you should use ng-class= to let Angular add classes that hide or show the elements. If you switch your ng-repeat to ng-repeat="job in jobs track by $index", you could write something like that in your showNext()-function:
$scope.showNext = function(index) {
$scope.currentJob = $scope.jobs[index]
}
and call it like ng-click="showNext($index) - of course you'd need to do some refactoring as well. But then you could write something like ng-class="{hidden: (job == currentJob}" to hide all buttons except in the current row.
There's a lot of good thoughts in this q&a: "Thinking in AngularJS" if I have a jQuery background?
I have an application with a chat functionality which works great, except for one part, when the keyboard appears, the ion-content won't resize to a proper height, so I am stuck when I want to scroll to the top and the header disappears completely. The view has a header, content and footer and what I want is the footer to appear above the keyboard and the content to resize so it fits between the header and the footer-bar. The view I have created is as followed:
<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
<div class="loader-center" ng-if="!doneLoading">
<div class="loader">
<i class="icon ion-loading-c"></i>
</div>
</div>
<div class="loader-center" ng-if="errorLoading">
<div class="loader">{{'error_loading_messages'|translate}}</div>
</div>
<ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
<ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
<div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
<div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
<div class="message-detail">
<span class="bold">{{message.postedBy.name}}</span>
</div>
<div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
<img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
<small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
</div>
<div class="cf"></div>
</div>
</ion-content>
<ion-footer-bar class="bar-light message-footer">
<button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
<label class="item-input-wrapper" for="newmessage">
<textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
</label>
<button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
</ion-footer-bar>
</ion-view>
I tried adding the keyboard-attach attribute to the ion-footer-bar, but the footer only gets bigger when I add this. Plus the footer already stays on top of the keyboard, so it appears unneeded. I have the following situation, it also appears that when I type something, the view goes up a little more.
This is when the keyboard is shown:
This is when the keyboard is hidden:
Does any of you know how to resize the ion-content to a normal height when the keyboard appears?
I have tried some things and the problem seemed to disappear, yet I don't think the solution is the right one or if this is actually the thing what solved the issue. So if anyone got a better solution, please share. First thing I had to do was including the Ionic keyboard plugin to get events based on the keyboard.
Inside the CSS, I have added:
.message-footer { min-height: 44px; }
Inside my controller I added the following code:
$scope.$on('taResize', function (e, ta) {
if(!ta || !footerBar) return;
var taHeight = ta[0].offsetHeight + 10;
var newHeight = (taHeight < 44) ? 44 : taHeight;
scroller.style.bottom = newHeight + 'px';
footerBar.style.height = newHeight + 'px';
});
I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.