I would love to use the power of Famo.us to animate some of my elements in my Angular project. I'm trying to get my head around how to use it with Bootstrap.
For example: I would like to animate a panel when they're loaded. Can I just add the fa-directives into the current HTML? I would love them just to appear within 2 seconds.
<div class="row">
<fa-surface ng-repeat="item in data | filter:search">
<div class="col-md-2">
<div class="panel panel-{{ item.panel }} panel-dark panel-body-colorful widget-profile widget-profile-centered">
<div class="panel-heading">
<i ng-hide="item.img" class="fa fa-user widget-profile-avatar" style="font-size: 5em;"></i>
<img ng-show="item.img" ng-src="item.img" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>{{ item.firstname }} {{ item.lastname }}</span><br>
</div>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="widget-profile-text" style="padding: 0;">
{{ item.type }}
</div>
</div>
</div>
</div>
</fa-surface>
</div>
Could anyone lead me into the right direction?
You can use fa-animation directive like this on-click example,
in your html:
<fa-modifier fa-size="[100, 100]" fa-translate="boxTransitionable.get()">
<fa-surface fa-background-color="'red'" fa-click="animate()">
<!---panel--->
</fa-surface>
</fa-modifier>
in your angular controller:
var Transitionable = $famous['famous/transitions/Transitionable'];
var Easing = $famous['famous/transitions/Easing'];
$scope.boxTransitionable = new Transitionable([0, 0, 0]);
$scope.animate = function() {
$scope.boxTransitionable.set([200, 300, 0], {duration: 2000, curve: Easing.inOutBack});
};
Source
use the famo.us/angular docs it's very heplful.
Related
I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
I have a grid view with two grids per row. This is the code:
<ion-content scroll="true" class="has-header">
<div class="row" style="padding-bottom: 40px;">
</div>
<div ng-repeat="i in products">
<div class="row" ng-if="$even">
<div class="col col-50">
<a class="item item-thumbnail-center" href="#">
<img src="http://{{host}}/{{
products[$index].prod_img
}}" class="img-thumbnail">
<h2>{{products[$index].prod_name}}</h2>
<p>Php {{products[$index].prod_price}}.00</p>
</a>
</div>
<div class="col col-50" ng-if="$index + 1">
<a class="item item-thumbnail-center" href="#">
<img src="http://{{host}}/{{
products[$index + 1].prod_img
}}" class="img-thumbnail">
<h2>{{products[$index + 1].prod_name}}</h2>
<p>Php {{products[$index + 1].prod_price}}.00</p>
</a>
</div>
</div>
</div>
</ion-content>
controller.js
$http.get("http://"+ $scope.host +"/mobile/get_products.php?cat_id=" + $stateParams.cat_id)
.then(function(response) {
$scope.products = response.data;
});
The problem is when the size of the array products is an odd, the second grid in the last row still shows up and certainly no item is displayed in there because the item is specified by the index is null. I've found some other solution on how to make this by configuring the array right from the controller but I want to ask if there is any way to check using an angular directive whether $index is null, and if true, the grid will be hidden.
you can use ng-class directive and put a css class which will get true when products[$index] === null | products[$index+1] === null. it will be like
ng-class={'hide-row': products[$index] === null | products[$index+1] === null}
where css
.hide-row{ display : none;}
I am using angularJS + cordova for a mobile application. I am able to display a list view, In that I am trying to update a list item when I click on that item, the values are changing but the UI is not updating.
Here is my code.
<md-list post class="" role="list" >
<md-item class="card" ng-repeat="post in posts">
<div class="card-header">
<div class="pro-pic">
<img src="{{post.UserImage}}" />
</div>
<h2>{{ post.UserName }}
<span>{{ post.CreatedDate | date:'medium' }} via --</span>
</h2>
<div class="post-info">{{ post.Description }}</div>
</div>
<div class="card-body">
<div class="card-img" ng-hide="post.IdeaImagePost == 0">
<img src="{{ post.IdeaImagePost }}" />
</div>
</div>
<div class="card-footer">
<div id="likeID" ng-click="onLike(post)"><i class="fa fa-thumbs-up {{post.LikeUserStatus ? 'active' : ''}}"></i><label> Like</label><span class="badge badge-xs badge-pink">{{ post.LikeUsersCount }}</span></div>
<div><i class="fa fa-commenting"></i> Comment<span class="badge badge-xs badge-pink">{{ post.CommentsCount }}</span></div>
</div>
</md-item>
</md-list>
View More
Here is JS code
$scope.onLike = function(post) {
console.log("LikeUserStatus: " + post.LikeUserStatus);
post.LikeUserStatus = !post.LikeUserStatus;
post.LikeUsersCount = post.LikeUserStatus ? parseInt(post.LikeUsersCount)+1 : parseInt(post.LikeUsersCount)-1;
console.log("LikeUserStatus: " + post.LikeUserStatus);
};
console.log("LikeUserStatus: " + post.LikeUserStatus);
` $timeout(function(){
post.LikeUserStatus = !post.LikeUserStatus;
post.LikeUsersCount = post.LikeUserStatus ? parseInt(post.LikeUsersCount)+1 :parseInt(post.LikeUsersCount)-1
})`;
$timeout runs the digest cycle after execution
This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>
I need to create a strcuture as below in my app through ng-repeat.
<div class="row">
<div class="col-50">1</div>
<div class="col-50">2</div>
</div>
<div class="row">
<div class="col-50">3</div>
<div class="col-50">4</div>
</div>
Right now my code is as below:
<div class="row">
<label class="item item-radio col col-50" ng-repeat="a in question.answer">
<input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'>
<div class="item-content">
<img src="img/ans/{{ a.option }}" />
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
But in the above code, its just a single row tag that I have. I wan't to somehow get the row tag contain/wrap every 2 items in the loop. What is the best way to achieve this?
Ref: Ionic Grid Doc
I managed to do it using $even.
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50">{{numbers[$index]}}</div>
<div class="col col-50">{{numbers[$index + 1]}}</div>
</div>
</div>
Here's a working JSFiddle.
The solution from #Patrick Reck is excellent, but it forces you to repeat your code twice,
I suggest this improvement:
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50"
ng-repeat="num in [numbers[$index],numbers[$index + 1]]">
{{num}}
</div>
</div>
</div>
this way you will write your code one time as if it is a normal ng-repeat
You can add flex-wrap: wrap to class row
http://jsfiddle.net/0momap0n/99/
<div ng-controller="MyCtrl">
<div class="row" style="flex-wrap: wrap">
<div class="col col-50" ng-repeat="number in numbers">{{number}}</div>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.numbers = [1, 2, 3, 4, 5, 6];
}
I would write it like this, you can increase the $index % 3 to match the number of columns that you would like, this one will create 3 columns ...
<div class="row">
<div class="" ng-repeat="i in range(1, 9)">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col">
<h1>{{ i }}</h1>
</div>
</div>
</div>
This solution is using flex-flow and solves this brilliantly:
CSS
.container {
display: flex;
flex-flow: row wrap;
}
.item {
width: 50%;
}
HTML
<div class="container">
<div class="item" *ngFor="let number of numbers">
{{number}}
</div>
Try like below. you can create any number of columns by using the below code. all you need to use the size property of the ionic grid and replace noOfColumns with your what number of columns you want. in this case just use 2 for noOfColumns. it will work like a charm.
Angular grid is based on a 12 column layout with different breakpoints based on the screen size. ref: https://ionicframework.com/docs/layout/grid
<ion-grid>
<ion-row >
<ion-col ng-repeat="n in numbers" size="{{12/noOfColumns}}">
{{ n }}
</ion-col>
</ion-row>
</ion-grid>