I am wanting to see if there is a way to bring in letter templates that have different text content on them inside my ng-repeat which only brings in the template title from my server. I want to see if I can get the content in without putting it along the other data on the server. Any suggestions?
Here is my controller where I am currently bringing in 1 template but that template is being repeated when I dont want it to be:
app.controller('letterTemplatesCtrl', function($scope, letterTemplatesSrv) {
$scope.getAllTemplates = letterTemplatesSrv.getAllTemplates().then(function(response) {
$scope.templates = response.data;
});
//Changes tempalte border to red when select button is clicked
$scope.activeTemplate = function(index) {
$scope.isSelected = index;
};
// Truncated letter template content
$scope.longText1 = "Dear (name), Ho Ho Ho! Merry Christmas! The Elves and I are busy making presents for all of the good boys and girls around the world. You have been such a good (boy/girl) this year, so I wanted to take a minute to write you a letter. I’ve made my Naughty and Nice list, and I’ve checked it twice. You are on my Nice List! I am so happy that you have been such a good (boy/girl) this year.I heard from my secret messenger that you want (What do they want for Christmas?) for Christmas this year. Because you have been so good, the Elves and I have prepared a special present for you to open on Christmas Morning. Can you do me a favor? I want you to try really hard to (insert something that the child needs to work on). If you can do that for me, then I will be very happy and might bring you an extra treat on Christmas Morning. By the time I get to your house in (location), I am going to be very hungry. Would you leave some cookies and milk out for me? Chocolate Chip cookies are my favorite, but I love all kinds of cookies! Well I need to get back to my workshop and help the Elves. Keep up the good work (Name) and have a Very Merry Christmas! Ho Ho Ho, Santa Claus";
});
Here is my HTML:
<div layout="row" layout-xs="column" layout-padding layout-margin layout-align="center center">
<div flex ng-repeat="template in templates">
<div class="template-chooser" ng-class="{'selected-template':isSelected === $index}">
<span class="template-title">{{template.template_name}}</span>
<p class="template-content" ng-text-truncate="longText1" ng-tt-chars-threshold="40"></p>
<md-button class="md-raised md-primary template-chooser-btn" ng-click="addProductToCart(product); activeTemplate($index)">Select</md-button>
</div>
</div>
</div>
Related
In this fiddle, I want to hover over "Your Truly" and have the image appear, while the text disappears. Does an app have to be initialized for this to work? I didn't think it did...
The angular HTML look like this (I didn't move my whole app in here, just trying to get this part to work)
<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'">
<span ng-hide="imgsrc.show"
ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"
ng-mouseout="imgsrc.hide">
Yours Truly
</span>
<img ng-src="{{imgsrc}}"/>
</a>,
It is possible to make something like this work without making a proper controller, though I'd discourage it. That said, I went ahead and got it working anyway:
<p class="text-justify last-body" ng-app>
This growing collection of studies, curated by
<a ng-init="imgsrc={
src: 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg',
show: false,
};">
<span ng-mouseover="imgsrc.show = true" ng-mouseout="imgsrc.show = false">
Yours Truly
</span>
<img ng-src="{{ imgsrc.src }}" ng-show="imgsrc.show" />
</a>,
is focused primarily
on studies dealing with eh tohp ah key pig*. As a fan of mooshoo and aigeiaig, I'm open to
working with any dataset ranging from yakdkat studies to lakuktauka. If you would like
to submit a study for publishing, or if you have any questions about a particular study,
please feel free to Contact Me. Thank you for visiting, and happy wamotiem!
</p>
This will display the image when you hover over "Yours Truly", and hide the image when you move the mouse away. The main thing preventing your example from working was the missing ng-app directive from the top-most element. Aside from that, I also cleaned up some of the logic to make it easier to reason out what was going on.
Here's a JSFiddle if you want to see it in action: https://jsfiddle.net/kv4qvu3w/2/
I am trying to make a random quote generator then use a tweet button to tweet the current quote (the content of the element) but I can only get the twitter api to tweet the url, I have researched and read but am completely stuck any help would be wonderful!
Here is HTML with twitter button
<body>
<h1>J.R.R. Tolkien Quote Machine!</h1>
<div id ="stuff">
<img id="image" src="http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsukywovht.jpg">
<h2 id = "quotetext">Press the button to discover the first quote.</h2>
<button id = "quotebutton" onclick = "randomQuote()">Get a new quote... </button>
</div>
<!--tweet the url-->
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
here is my javascript...
var myQuotes = [
"'Faithless is he that says farewell when the road darkens.'",
"'All we have to decide is what to do with the time that is given us.'",
"'If more of us valued food and cheer and song above hoarded gold, it would be a merrier world.'",
"'Never laugh at live dragons.'",
"'There is some good in this world, and it's worth fighting for.'",
"'Faithless is he that says farewell when the road darkens.'",
"'The world is indeed full of peril, and in it there are many dark places; but still there is much that is fair, and though in all lands love is now mingled with grief, it grows perhaps the greater.'",
"'Many that live deserve death. And some that die deserve life. Can you give it to them? Then do not be too eager to deal out death in judgement.'",
"'Not all those who wander are lost.'",
"'I will not say: do not weep; for not all tears are an evil.'",
"'Little by little, one travels far'",
"'Courage is found in unlikely places.'",
"'It's the job that's never started as takes longest to finish.'",
"'There is nothing like looking, if you want to find something. You certainly usually find something, if you look, but it is not always quite the something you were after.'",
"'The wide world is all about you: you can fence yourselves in, but you cannot forever fence it out.'",
"'It may be the part of a friend to rebuke a friend's folly.'",
]
var myImages = [
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord-of-the-rings-quiz-orig_zpsse5k5mrg.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/12d212546fbb50f1f278db8d3c893b05_zpsqzlpz91p.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres1_zpsdsmi4elj.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/samwise-gamgee_zpsrhuv2u33.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/p0232nkj_zpsevgnb5vx.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images2_zpsgyxpexod.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/gollum_zpsy583lrzv.png",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zpsonmjtyty.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imagesq_zpsfgguq2ha.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgres_zpsesxdolbh.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/images_zps9qwoibjr.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/imgresw_zpseizew5r4.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/The-Hobbit-An-Unexpected-Journey-2012-1_zpsjxz1lw9i.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/middleearthlargelargerstill_zpscp5xil1m.jpg",
"http://i1376.photobucket.com/albums/ah30/joecarlowittosi/lord_of_the_rings-_the_fellowship_of_the_ring_wallpaper_15_1024_zpssafzudw9.jpg"
]
function randomQuote() {
var randomNumber = Math.floor(Math.random() * (myQuotes.length));
document.getElementById("quotetext").innerHTML = myQuotes[randomNumber];
document.getElementById("image").src = myImages[randomNumber];
}
I have some which doesn't really do much, still it does really take the longest time to load. I have written the code down for you all to see:
app.js
var simple = "simple test";
angular.module('CRTapp', []).controller('ItemController', function() {
this.item = simple;
});
index.html
<div id="item" ng-controller="ItemController as item">
{{item.simple}}
</div>
Sometimes people are having to wait nearly a second to see:
{{item.simple}}
before
simple test
appears but this is a very long time for some of you to have to wait. Waiting is ok for me but sometimes Jake gets impatient so I can make the HTML page load slowly if you like, but I do not want my Mr Stretchy to become sad when he sees a template before his own special website for his adventures in the Candy Kingdom.
This delay is the time angular library gets to parse your HTML. You can use ng-bind instead:
<div id="item"
ng-controller="ItemController as item"
ng-bind="item.simple">
</div>
This way, your page won't get polluted while angular loads its content.
Well I have three blocks that I want for the user to be able to sort as he pleased :
<div id="sortable" class="row ui-sortable">
<div class="boxEncar">
<div class="col-md-4 ui-sortable">
<div id="8_5_middle1" class="block block-8">
<div id="editor-container">
<h2 id="title8">Block 8</h2>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
</div>
</div>
</div>
<div class="col-md-4 ui-sortable">
<div id="7_6_middle2" class="block block-7">
<div id="editor-container">
<h2 id="title7">Block 7</h2>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</div>
</div>
</div>
<div class="col-md-4 ui-sortable">
<div id="9_7_middle3" class="block block-9">
<div id="editor-container">
<h2 id="title9">Block 9</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</div>
</div>
</div>
</div>
</div>
The id 8_5_middle1 for example, show's weight _ block-id _ zone that are stocked on the database like this :
ZONE | bid | weight
---------------------------
middle1 | 8 | 5
---------------------------
middle2 | 7 | 6
---------------------------
middle3 | 9 | 7
So the issue here is this:
jQuery(document).ready(function() {
jQuery('.col-md-4').sortable({
connectWith: ".col-md-4",
items: ".block",
update: function (event, ui) {
var myTable = jQuery(this).sortable('toArray').toString();
alert(myTable);
}
});
});
When I drag a block to another "let's say that I drag the block8 from middle1 to middle2 " here's my alert : 8_5_middle1,7_6_middle2 meaning that it just alert the old position! Is there a way to alert the new zone which the block is positionned ? Much appreciated
Is this what you want?
jQuery('.col-md-4').sortable({
connectWith: ".col-md-4",
items: ".block",
update: function (event, ui) {
var myTable = jQuery(this).sortable('toArray').toString();
//alert(myTable);
alert($(ui.item).index());
}
});
$(ui.item).index(); will return the current item index, the element ids are not changing so how would you get an updated zone?
Edit:
If you want to get the dragged item id or other attributes, you may use $(ui.item).attr('id')
fiddle link
Since you are passing the ui object, there are several things you have available there. It will be very helpful to understand if you console.log(ui) and examine the object contents.
I'm working on a web app that allows a user to select some text, click a button, and save the highlighted text. This works great in desktop browsers, (chrome for this example), but in iOS I'm having issues with the native text selection, where the user can change the selected text.
Here is the JsFiddle showing the issue (issue only exists in iOS): http://jsfiddle.net/JasonMore/gWZfb/
User starts text selection
User expands their text selection, and clicks "Show the selected text above"
Only the first selected word "The" shows up, even though I want "The Path of the righteous man"
1 Begin
2 Select Text and hit button
3 Only "The"
Here is the JS I am using:
$(function() {
$('#actionButton').click(function() {
$('#result').text(selectedRange.toString());
});
$('#slipsum').on('mouseup touchend','p', function() {
getSelectedRange();
});
});
var selectedRange = null;
var getSelectedRange = function() {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
};
HTML:
<h3>Selected Text:</h3>
<p id="result">
</p>
<br/>
<p>
<input type="button" id="actionButton" value="Show the selected text above" />
</p>
<!-- start slipsum code -->
<div id="slipsum">
<h1>Is she dead, yes or no?</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>So, you cold?</h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<h1>I'm serious as a heart attack</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>Is she dead, yes or no?</h1>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
<h1>Is she dead, yes or no?</h1>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code -->
To anyone who stumbles upon this issue in the future, here is the resolution:
http://jsfiddle.net/JasonMore/gWZfb/
$(function() {
$('#actionButton').click(function() {
if (selectedRange) {
$('#result').text(selectedRange.toString());
clearInterval(timer);
}
});
timer = setInterval(getSelectedRange, 150);
});
var timer = null;
var selectedRange = null;
var getSelectedRange = function() {
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
}
};