Basically as the title says I was wondering if it is possible or if someone could come up with an alternative to this. I have this div:
<div id="wrapper">
<div style="margin: 1em">
<h4>User Card for {{username.slice(5)}}</h4>
<div id="canvas-holder" class="col-lg-4">
<canvas id="chart-area" width="20%" height="20%"></canvas>
</div>
<div class="col-lg-8">
Total Score: {{totalscore.toFixed(3)}}
</div>
</div>
</div>
In the line where it says User Card for {{username.slice(5)}} obviously nothing shows up in the {{ }} until there is data for it, but on my page the User Card for part still shows up. I was wondering the possibility of getting only the User Card part to show up while there is no {{username.slice(5)}} and once there is data for that field then the for will show up? Any ideas?
You should be able to wrap a span around the portion you want to show, such as:
<h4>User Card <span ng-show="username">for {{username.slice(5)}}</span></h4>
Try using ng-if on the parent element
<div id="wrapper">
<div style="margin: 1em">
<h4 ng-if="username.slice(5)">User Card for {{username.slice(5)}}</h4>
<div id="canvas-holder" class="col-lg-4">
<canvas id="chart-area" width="20%" height="20%"></canvas>
</div>
<div class="col-lg-8">
Total Score: {{totalscore.toFixed(3)}}
</div>
</div>
</div>
Related
i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item
Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
I got this:
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
<div class="col-lg-3">
<div class="visibleContent">
</div>
<div class="expandibleContent">
</div>
</div>
I want .visibleContent to be clickable to expand the .exandibleContent like Google Images with triangle pointer.
Correct Example: LINK
I'm trying to deeply understand that code but I can't.
Can you write a code with the same functionality but only with four images?
I only need a grid of 4 images with the same slidetoggle function.
Check this out
https://codepen.io/anon/pen/owbebY
change
$('.image-grid').empty().html(cells(50));
to
$('.image-grid').empty().html(cells(4));
do you need like this
This is my first question - and it is really just more of a frustration. I've went through about 12 different stack overflow questions that are similar and have copied their code and I still can't get the bloody background color to change on click. So I assume I'm missing something.
https://codepen.io/Dawsraki/pen/XRGBLW
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body ng-controller="SwitchController" ng-style="myStyle">
<div ng-switch="slider.page" class="screen" >
<div id="record_player" ng-switch-when="1">
<span><</span>
<div class="rectangle">
<div class="circle1">
<div class="circle3">
</div>
</div>
<div class="handle">
<div class="circle1">
</div>
<div class="hand">
</div>
<div class="arm">
</div>
</div>
<div class="toggles">
<div class="left_dash"></div>
<div class="right_dash"></div>
</div>
</div>
<h1>Listen to Music</h1>
<span>></span>
</div>
<div id="cassette" ng-switch-when="2">
<span><</span>
<div class="rectangle">
<div class="circle1">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line3">
</div>
<div class="line4">
</div>
<div class="circle2">
</div>
</div>
<h1>Share it with friends</h1>
<span>></span>
</div>
</div>
</div>
</body>
</html>
Here is my code pen - I want the background color to change when I click on the arrow and I have seen so many simple solutions but they just arn't working and I've no idea why. If anyone wants to help an AngularJS noob out there will be much love and biscuits <3 (DISCLAIMER: biscuits will not be provided)
This problem is due to ng-switch, as it creates its own scope.
Use $parent.myStyle={background:'red'}" in your anchor tag to fix this
I would like to know if it's possible using jQuery to detach and then re-attach an element (e.g. a div) to the DOM without reloading the content within the element.
Consider this example layout:
<div class="row">
<div class="col-lg-6">
<div class="card">
<img src="something.jpg" />
</div>
<div class="card">
<img src="something.jpg" />
</div>
<div class="card">
<iframe src="example.com" id="widget">
</div>
</div>
<div class="col-lg-6">
<div class="card">
<!-- User hides this card -->
<img src="something.jpg" />
</div>
<div class="card">
<iframe src="example.com" id="widget">
</div>
</div>
</div>
There are 3 cards in the first column and two in the second column. If the user hides one of the cards in the second column, I want to restack the cards by moving one of the cards from the first column to the second column, so that there are now two cards in each column. I can accomplish this using .detach() and .appendTo() easily enough, but when I re-attach the card from the first column to the second, whatever content that card contains is reloaded, be it an image or a widget such as an embedded Tweet.
What I'd like to know is if it's possible to move a card from one column to another without triggering the content within it to be reloaded.
Using .clone() does not appear to request resource again. Note, .detach() is called after .appendTo() .
Note also that id of element with a document should be unique; two elements having id "widget" are within html at Question; try changing to class="widget"
$(".col-lg-6:eq(1) div").click(function(e) {
$(e.target).hide();
var clone = $(".col-lg-6:eq(0) div:eq(0)").clone();
clone.appendTo(".col-lg-6:eq(1)");
$(".col-lg-6:eq(0) div:first").detach();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="row">
<div class="col-lg-6">
<div class="card">
<img src="http://lorempixel.com/50/50/nature" />
</div>
<div class="card">
<img src="http://lorempixel.com/50/50/cats" />
</div>
<div class="card">
<iframe src="example.com" class="widget"></iframe>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<!-- User hides this card -->
<img src="http://lorempixel.com/50/50/sports" />
</div>
<div class="card">
<iframe src="example.com" class="widget"></iframe>
</div>
</div>
</div>
I've got a simple chat app in AngularJS, and I'm sending a message to the view which is being outputted on the front end like this:
<div id="messages" class="col-xs-12 chat-messages">
<div class="col-xs-12 chat-message" ng-repeat="message in chatMessages">
<div class="you">
<ul class="media-list">
<li class="media">
<div class="media-left">
<div class="media-object img-circle" style="background-image: url( {{message.avatar_url}} )"></div>
</div>
<div class="media-body">
<div class="media-heading text-muted small">
{{message.nickname}}
</div>
<div class="message-content bubble">
{{message.content}}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
At the moment I am just going through the chatMessages array and outputting them using this div. I have given each message another attribute of kind where I will send to the view different kinds of messages, such as userMe, userOther, global etc. and I will need to use a slightly different HTML markup for each kind of message. I understand that this should be done using ng-if in AngularJS, but I don't quite know how to go about this.
From the view, I will need to output some different HTML depending on the message.kind value.
Any ideas?
If you have several possible div options for each element, I'd use ng-switch, like Tom said in the comments.
The idea is that you switch on the message.kind, or whatever you want to switch on, and have each div as a "Case" for that:
It would look something like this:
<div class="media-body" ng-switch="message.kind">
<div class="media-heading text-muted small" ng-switch-when="1">
{{message.nickname}}
</div>
<div class="message-content" ng-switch-when="2">
{{message.content}}
</div>
<div class="message-content bubble" ng-switch-default>
default text
</div>
</div>
Fiddle
You have two solution to archieve what you want :
<div ng-repeat="msg in messages">
<div ng-if="msg.kind === 'userMe'">userMeMessage</div>
<div ng-if="msg.kind === 'global'">globalMessage</div>
...
</div>
Or this :
<div ng-repeat="msg in messages|filter:{kind:'userMe'}">
UserMe
</div>
<div ng-repeat="msg in messages|filter:{kind:'global'}">
Global
</div>