When I try to run, it not show my comment after I enter some text in comment box. Why? Also my another problem is the log show
ReferenceError: angular is not defined".
But I already place <script src="js/angular.min.js"></script> link to my js folder. What is wrong with my coding? I create app using ionic cordova and try to make comment that have upvote and downvote. Here the coding:
Script
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Vue.component('post', {
template: "#post-template",
props: ['post'],
data: function() {
return {
upvoted: false,
downvoted: false
};
},
methods: {
upvote: function() {
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote: function() {
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed: {
votes: function() {
if (this.upvoted) {
return this.post.votes + 1;
} else if (this.downvoted) {
return this.post.votes - 1;
} else {
return this.post.votes;
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
comments: [{}],
comment: ""
},
methods: {
postComment: function() {
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
}
}
});
CSS
a {
padding-left: 5px;
}
.disabled {
color: orange;
}
/* some simple transitions to make the upvote and downvote
buttons fade in as a visual cue for the user */
.glyphicon {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.glyphicon:hover {
opacity: 0.75;
cursor: pointer;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--https://code.jquery.com/jquery-2.2.0.js-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js-->
<!--https://cdn.jsdelivr.net/vue/1.0.16/vue.js-->
<script src="js/vue.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>{{ post.title }}</a>
</li>
</template>
</ion-content>
</ion-pane>
</body>
</html>
Related
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
I'm new on the Vue js framework. And I'm trying to use 2 transition in one element which is working but the second transition doesn't work very well.
I mean the first works with the animation properties but the seconds works but the animation doesn't it.
Here's my code:
<div id="app-17" class="col-sm-4">
<h1>Lista con VueJS - AJAX</h1>
<button class="btn btn-sm btn-primary mb-4" v-on:click="show = !show">Mostar/Ocultar Lista</button>
<button class="btn btn-sm btn-primary mb-4" v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-if="show" v-for="item in list" v-bind:key="item.name">
{{item.name}}
</li>
</transition-group>
</div>
Here's the JavaScript:
<script type="text/javascript">
var urlUsers = 'https://jsonplaceholder.typicode.com/users'
app17 = new Vue({
el: '#app-17',
created: function(){
this.getUsers();
},
data: {
list: [],
show: false
},
methods: {
getUsers: function () {
this.$http.get(urlUsers).then(function (response) {
this.list = response.data;
});
},
shuffle: function () {
this.list = _.shuffle(this.list)
}
}
})
</script>
And the CSS style :
<style>
/*ANIMATION APP-8*/
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.flip-list-move {
transition: transform 1s;
}
</style>
I'm also using those links:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
Here's live example:
https://codepen.io/blackandnoob/pen/qyeJVW
I am in a bit trouble as I don't know how to implement the image popup in jquery for firebase. I have searched it on the internet but did not find the way how to implement it for the dynamic websites. I am having the following jquery code, can anyone help? I haven't found anything on stackoverflow also regarding this.
this is my html code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>images</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="overrides.css">
</head>
<style>
.contentImage{
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: 40%;
transition: .5s ease;
backface-visibility: hidden;
}
.image:hover {
opacity: 0.3;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">here is the title</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Your images</li>
<li class="active">Public images</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="contentHolder">
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE",
authDomain: "farmyantra.firebaseapp.com",
databaseURL: "https://farmyantra.firebaseio.com",
storageBucket: "farmyantra.appspot.com",
messagingSenderId: "146534813177"
};
firebase.initializeApp(config);
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="timeline.js"></script>
</body>
</html>
and this is my js file
$(document).ready(function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var token = firebase.auth().currentUser.uid;
queryDatabase(token);
} else {
// No user is signed in.
window.location = "index.html";
}
});
});
function queryDatabase(token) {
firebase.database().ref('/Posts/').once('value').then(function(snapshot) {
var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
for (var i = 0; i< keys.length; i++) {
var currentObject = PostObject[keys[i]];
if (i % 4 == 0) {
currentRow = document.createElement("div");
$(currentRow).addClass("row");
$("#contentHolder").append(currentRow);
}
var col = document.createElement("div");
$(col).addClass("col-lg-3");
var image = document.createElement("img");
image.src = currentObject.url;
$(image).addClass("contentImage image hover ");
var p = document.createElement("p");
$(p).html(currentObject.caption);
$(p).addClass("contentCaption");
$(col).append(image);
$(col).append(p);
$(currentRow).append(col);
//create new row on every third entry
//col-lg-4
}
// ...
});
}
Well, your question is not clear. However let me try to answer as per my understanding. If you want to display images in a popup, add a bootstrap modal to html, and on click of each image that you are displaying from firebase database,show the bootstrap modal as explained below:
Add this modal div to your HTML:
<div id="imageModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Caption goes here..</h3>
</div>
<div class="modal-body">
<div id="image"> </div>
</div>
</div>
</div>
Now in your timeline.js file, add below code:
$('img').on('click', function () {
$('#imageModal #image').empty();
var imgUrl = $(this).attr('src');
var caption = $(this).siblings('.contentCaption').html();
$('#imageModal #image').append('<img width="100%" height="100%" src="' + imgUrl + '"></img>');
$('#imageModal .modal-title').text(caption);
$('#imageModal').modal('show');
});
Note: There is a small error in your queryDatabase function:
var image = document.createElement("img");
image = document.createElement("div")
image.src = currentObject.url;
You are creating an image element and assigning the same variable to a div element. So, the image element is overwritten by div element. Delete the second statement image = document.createElement("div") for you to display the image element.
so I have a database table called AnonymousComment which contains the following details:
[Id] INT IDENTITY (1, 1) NOT NULL,
[Title] VARCHAR (50) NULL,
[Comment] TEXT NULL,
[AgreeNumber] INT NULL,
[MetaId] VARCHAR (50) NULL,
[UserFeeling] TEXT NULL,
[AnonymousDate] DATETIME NULL,
Then I have a View (Index) that displays all the rows (Anonymous Comments), displaying the title of each comment then when you click on the title, it shows the title, UserFeeling (emoticon) and comment in a pop up modal as shown in the picture below
The code for the index view is as followed
#using System.Web.UI.WebControls
#using Siza.Models
#model IEnumerable<Siza.Models.AnonymousComment>
#{
ViewBag.Title = "Siza Anonymous";
Layout = "";
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!--Hover Popup CSS-->
<link href="~/Content/css/popuphover.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--JQuery Plugin-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--some more of matt's crap-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<style>
divider {
height: 1px;
width: 100%;
display: block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
div#imageToggle img {
cursor: pointer;
}
.mystyle input[type="text"] {
height: 100px;
font-size: 36px;
}
.textwrap {
display: inline-block;
white-space: nowrap;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #808080;
font-size: 24px;
background: white;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition: color .2s ease-out, background 1s ease-in;
}
</style>
</head>
<div class="row col-lg-12 text-center fade-in one">
#foreach (var item in Model)
{
<!-- Modal -->
<div class="modal fade" id="#item.Id" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Post Number: #item.Id</h4>
<h4 class="modal-title">#item.Title</h4>
<i class="#item.UserFeeling"></i>
</div>
<div class="modal-body">
<div class="floating-label-form-group controls">#Html.TextAreaFor(modelItem => item.Comment, new { #readonly = true })</div>
</div>
<div class="modal-footer">
<div align="center"><img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup"/> <h4>Like</h4></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<span class="wrapper" data-toggle="modal" data-target="##item.Id">
<div class="textwrap">
#Html.DisplayFor(modelItem => item.Title)
</div>
<span class="tooltip">
<div align="center">
<i class="#item.UserFeeling"></i><br />
<img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup" /> Likes:#item.AgreeNumber
</div>
</span>
</span>
}
</div>
Wat I want to do, is to have a toggle between increment and decrement onclick of the like button in the modal. So when you click on the like button, it increments the AgreeNumber column by one for that specific row then it turns to unlike. Then if you click on the unlike button, it decrements the column by 1 for that row.
I was thinking have on click to call a javascript function which executes a raw sql statement which goes something along the lines of
this
#{
using (var context = new SizaData_1Entities()){
context.AnonymousComments.SqlQuery("UPDATE dbo.AnonymousComment SET AgreeNumber = AgreeNumber - 1 WHERE Id =" + item.Id);
}
}
Another curve ball for this problem is the fact that each row created with a for each item.
Help would be greatly appreciated
Thanks in advance
I hope the following answer will help you
Create 2 image for like and unlike
Razor
<img id="likeImg" src="~/image/like.png" />
<img id="unLikeImg" src="~/image/unlike.png" />
Access the controller action via the ajax call
Ajax
$(function () {
$("#likeImg").click(function () {
$.ajax({
url: '/Home/SetLike',
contentType: 'application/json; charset=utf-8',
type: 'POST',
cache: false,
success: function (result) {
// Success Statement
},
error: function (xhr, status, error) {
alert("Error");
}
});
});
$("#unLikeImg").click(function () {
$.ajax({
url: '/Home/SetUnLike',
contentType: 'application/json; charset=utf-8',
type: 'POST',
cache: false,
success: function (result) {
// Success Statement
},
error: function (xhr, status, error) {
alert("Error");
}
});
});
});
In controller action write the function for like and unlike
Controller
public void SetLike()
{
// Like Code here
}
public void SetUnLike()
{
// Unlike code here
}
I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:
Here is the index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>
Here is the script.js:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})
Here is the template file userInfoCard.html loaded by the directive:
<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />
<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>
And last but not least, the style.css:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}
So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.
In order to animate ngShow/Hide elements you first need to include ngAnimate module:
angular.module('app', ['ngAnimate']);
Then all you need just a few little CSS rules:
.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}
Demo: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info
You can do it by the following step:
Step1: First add the library/package of angular-animate.js
Step2: Then include the library in the module angular.module('app', ['ngAnimate']);
Step3 You can manipulate the UI like angular.element(element).fadeIn(1000, doneFn);
Check the documentation for Reference :https://docs.angularjs.org/api/ngAnimate
you are missing angular.module('app', ['ngAnimate']); otherwise animations wont work.
You may also wantto add Angular Animate