I have one tabular structure using div, where am showing data. If i will click on one row then am hiding that row and showing some content in place of that. It is similar like google inbox concept, where on click of on row it will show the mail content there only.
But in inbox on click on another email it first hiding the already expanded email content and then showing the other one. In my case am able to show the content on click of the row but unable to hide already shown content div.
This is my code, I have used ng-show and ng-hide along with ng-click.
<div class="surveyList" ng-repeat="survey in allSurveys">
<span class="checkbox" ng-hide="showDetails"></span>
<div class="toogleSurvey" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="showDetails=!showDetails" ng-hide="showDetails">
<div>{{survey.Name}}</div>
<div>{{survey.Type}}</div>
<div class="hidden-xs">{{survey.SurveyReference}}</div>
<div class="hidden-xs">{{survey.CreatedDate}}</div>
<div class="hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey"><img src="images/edit_normal.png" /></a>
<a class="deleteSurvey"><img src="images/delete_normal.png" /></a>
<a class="exportSurvey"><img src="images/export_normal.png" /></a>
<a class="menuSurvey"><img src="images/menu_normal.png" /></a>
</div>
</div>
<div class="surveyDetailsBox" ng-show="showDetails" ng-click="showDetails=!showDetails">
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.Name}}</p>
<div class="surveyDetailHeadTool">
<a class="editSurvey"><img src="images/edit_normal.png" /></a>
<a class="deleteSurvey"><img src="images/delete_normal.png" /></a>
<a class="exportSurvey"><img src="images/export_normal.png" /></a>
<a class="menuSurvey"><img src="images/menu_normal.png" /></a>
</div>
</div>
</div>
</div>
On click on div.toogleSurvey am showing div.surveyDetailsBox and it goes reverse also.
Check
var app = angular.module("myapp", []);
app.controller("myctrl", ['$scope', function($scope) {
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="myctrl">
<div>
<div class="toogleSurvey" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="showDetails=!showDetails" ng-hide="showDetails">
Click on toogleSurvey
</div>
<div class="surveyDetailsBox" ng-show="showDetails" ng-click="showDetails=!showDetails">
Click on surveyDetailsBox
</div>
</div>
</div>
Try doing this way.
use ng-click and call a controller function passing the survey object like
<div class="toogleSurvey" ng-click="showSurveyDetailsBox(survey)">
and in your controller
$scope.showSurveyDetailsBox = function(surveyobj)
{
$scope.surveyobjectForDetailsBox = surveyobj;
$scope.showSurveyDetails = true;
}
Related
I'm trying to dynamically show the title of a filename once the anchor tag is clicked. Once the anchor tag is clicked, it's supposed to show its filename, then its file at the bottom (given a gdrive link). Showing the file works well, but I can't seem to show the name of the file. Instead of the filename, it shows {{file.name}}, which means that file.name is not being evaluated. (I am using AngularJS to dynamically traverse through and show files and filenames)
Here is the code.
<div class="ui two column stackable grid">
<div class="column">
<div class="drive-link">
<h2 class="header" id="filename"></h2>
<!-- the filename should be shown here. Value is being passed through {{file.name}} from an a tag below -->
<iframe name="embedded-iframe" allowfullscreen="" frameborder="0"></iframe>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="single-category-component" ng-if="$index==0">
<div class="active title">
<i class="dropdown icon"></i>
{{file.category}}
</div>
<div class="active content">
<a target="embedded-iframe" href="{{file.link}}" onclick="document.getElementById('filename').innerHTML='{{file.name}}';"> {{file.name}} </a>
<!--where I'm passing {{file.name}} to the h2 tag on the top-->
<div ng-repeat="next_file in files | limitTo:files.length:$parent.$index">
<a target="embedded-iframe" ng-if="$index > 0 && next_file.category_id == files[$index-1].category_id" href="{{next_file.link}}">{{next_file.name}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-click to pass the file object to your controller.
HTML
<h2 class="header" id="filename">{{fileName}}</h2>
.............
<a target="embedded-iframe" ng-href="file.link" ng-click="show_file_name(file)"> {{file.name}} </a>
JS
//capture the file properties in the controller function of your ng-click
$scope.show_file_name=function(file){
$scope.fileName=file.name;
$scope.fileLink=file.link;
}
do like this first set onclick method and pass file name to function
<a target="embedded-iframe" href="{{file.link}}" onclick="show_file_name({{file.name}})"> {{file.name}} </a>
now in javascript function you can get file name like this
function show_file_name(name){
console.log(name); //this is the file name that you sent form onclikc method
}
you can pass multiple values like this
onclick="show_file_name({{file.name}}, {{file.link}})"
and get it like this
function show_file_name(name, link){
console.log(name);
console.log(link);
}
How can I show a Logout Button when I click on my icon?
home.html:
<div class="icon-bar">
<div class="logout">
<img src="/Login/images/login.png" ng-model="logout">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
</div>
</div>
<div>
When i click on the icon, I want the logout button to appear like a "dropdown"
I want to put the logic in a controller.
Sorry, I know it's an easy task, but I am totally new in angular js :/
You can add ng-click on the image. This will call a function that will toggle the variable logout.
You can also put logout = !logout directly inside the ng-click directive
The dropdown effect has to be done with css/js. This has nothing to do with AngularJS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.logout = false;
$scope.toggleLogout = function() {
$scope.logout = !$scope.logout;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="logout" ng-app="myApp" ng-controller="myCtrl">
<img src="/Login/images/login.png" ng-click="toggleLogout()">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
</div>
</div>
Here I use ng-click: when you will click on your image, it will change the value of logout (true -> false ; false -> true). Your ng-show / ng-hide will work as you expect.
<div class="logout">
<img src="/Login/images/login.png" ng-click="logout = !logout">
<div class="check-element animate-hide" ng-show="logout">
<button>Logout</button>
</div>
<div class="check-element animate-hide" ng-hide="logout">
logout is {{logout}}
</div>
</div>
Try is on JSFiddle.
Navbar (main.html):
<nav class="navbar navbar-dark bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container" ng-controller="UpComingGamesCtrl">
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<a class="navbar-brand" href="#/">VideoGame Releases</a>
<form ng-submit="searchGame()">
<input type="text" id="form1" class="form-control" ng-model="gameToSearch">
</form>
</div>
</div>
</nav>
Controller:
...
$scope.games = [];
$scope.searchGame = function () {
if ($scope.gameToSearch) {
console.log('entered with text');
getUpcomingGames.getGame($scope.gameToSearch).get({}, function (data) {
$scope.games = data.results;
});
}
}
upcoming_games_template.html:
<div class="row" ng-repeat="games in games | chunkBy:3">
<div class="col-md-4" ng-repeat="game in games">
<div class="card">
<div class="view overlay hm-white-slight card-image">
<img src="{{game.image.screen_url}}" class="img-fluid" alt="">
<a href="#/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<div class="card-block">
<h4 class="card-title">{{game.name}}</h4>
<p class="card-text">{{(game.original_release_date | limitTo: 10) || getFutureReleaseDate(game) }}</p>
Read more
</div>
</div>
</div>
</div>
I am trying to create a search function on my navbar in my main.html file and when the user presses the enter key, I get the info from an external API using that search and update the upcoming_games template. Now, I know I enter the function "searchGame" because it logs to console and I know the data I get back is good. But when i try to change the variable "$scope.games = data.results;", the view does not update.
Now if I create the same search bar form inside the upcoming_games_template.html it works perfectly.
Why does this happen ? I'm declaring the controller in my main.html file, so it should work the same, right ?
I also don't think I need the $scope.$apply() in this situation.
Thank you.
Probably you're using two different controllers, so you're filling the $scope.games variable of a controller while you would fill the $scope.games variable of the other controller. If you provide a jsfiddle it could be simpler. If you want a fast solution you should try to use a $rootScope.games variable and repeat over the same rootscope variable :
<div class="row" ng-repeat="games in $root.games | chunkBy:3">
<!-- Content -->
</div>
This is not the better solution but it should works.
I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});
Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>
Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?