Question is quite simple but i am not able to hide image. Here is the code.
I am fetching the image details from database and showing them in grid format. Here is the code.
<span class="close" id="close">×</span>
<div class="my-gallery" itemscope id="grid" >
<figure itemprop="associatedMedia" >
<a href="{{imageUrl}}" id="thumb" name="{{pid[$index]}}" class="thumbnail " itemprop="contentUrl" data-id="{{pid[$index]}}" data-size="800x600">
<img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
</a>
</figure>
</div>
</div>
and here are more code.
$scope.myFunc = function(btnId) {
alert(btnId);
document.getElementById(btnId).style.visibility = "visible";
};
I want to hide the respective image. there could be multiple image but image id is different. So, what i want is when user click on any image it will hide.
Please advise how can i do that.
First of all Don't use getElementById.In angular you can simple bind the $scope variable.
Have a variable with the image object to show/hide. Make it true or false when you need to show/not.
On ng-click you can set the variable to be false. bind the variable to the element, so that you can hide whenever necessary.
<div ng-if="img.show">
<img src="" class="img-responsive " data-id="{{pid[$index]}}" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
</a>
</div>
DEMO
angular.module('webapp', [])
.controller('AppCtrl', function($scope) {
$scope.data = [
{
"id": 5454554,
"Url": "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg",
"show":true
},
{
"id": 5454554,
"Url": "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg",
"show":true
}
];
$scope.hide = function(img){
img.show = false;
}
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="add-pic-box1 col-md-3">
<div ng-repeat="img in data" >
<div ng-if="img.show">
<img class="thumb" ng-model="add_new_ads_mdl.img_add" imgid = "{{img._id}}" src="{{img.Url}}" />
<button ng-click="hide(img)"> HIDE ME </button>
</div >
</div>
</div>
</body>
</html>
You can use ng-click with $event
<div ng-app="app" ng-controller="Ctrl">
Click me
</div>
app.controller("Ctrl", function($scope) {
$scope.removeMe = function(event) {
event.toElement.remove()
};
});
Example
Related
I've got an angular app I'm working on where I'm trying to auto fill a pop up modal based on a user's selection.
I thought I could use my model service to keep track of what the user selected and 'wire' the controller for the <select> list and it's edit button to the model but that doesn't seem to work.
Adding to the complexity I'm using angular-route and my <select> list is buried in a view. I was trying to keep my pop up modals in a separate controller outside the view because they've got their own templates and I had problems when I nested them into the view...
I've seen a few examples of wiring up angular apps and thought I understood them but I can't figure out what I'm doing wrong.
EDIT (thanks Pankaj Parkar for pointed out my mistakes in the plunker):
I have a plunker here:
https://plnkr.co/edit/6f9FZmV8Ul6LZDm9rcg9?p=preview
Below is the snipped in a single HTML page with CDN links :).
Am I just completely misunderstanding how angularjs is suppose to work?
<html ng-app="myApp">
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div ng-view></div>
<script id="editables.html" type="text/ng-template">
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple ng-model="model.selected">
<option ng-repeat="n in editables">{{n}}</option>
<select>
</div>
<a href="#editModal" class = "btn btn-info" data-toggle="modal" ng-click="edit()" >Edit</a>
</form>
</div>
</div><!--end container div-->
</script>
<div ng-controller="modalsController">
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="name" ng-model="formModel.name"></input>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-3 control-label">Description</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="desc" ng-model="formModel.desc"></input>
</div>
</div>
<div class="modal-footer">
<pre> {{ formModel | json }}<br><br>Working: {{ workingMap }}</pre>
Cancel
Continue
</div>
</form>
</div>
</div>
</div><!-- end modal -->
</div>
</body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src = "js/script.js"></script> -->
<script>
var app = angular.module('myApp', ['ngRoute']);
var modelService = function ($log){
var moduleHello = function(myMessage){
console.log("Module hellow from myService " + myMessage);
}
var moduleNames = {
"First" : {desc: "First's Description"},
"Second" : {desc: "Second's Description"},
"Third" : {desc: "Third's Description"}
};
var moduleWorkingName = {};
return {
hello: moduleHello,
editables: moduleNames,
workingName: moduleWorkingName
}
}//end modelService
app.factory("modelService", ["$log", modelService]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editables', {
controller: "editablesController",
templateUrl: "editables.html"
}).
otherwise({
redirectTo: "/editables"
});
}]);
app.controller('editablesController', ['$scope', '$log','modelService', function($scope,$log, $modelService) {
$scope.model = {};
//console.log( JSON.stringify( $modelService.editables ) );
$scope.editables = [];
for ( name in $modelService.editables){
$scope.editables.push( name );
}
$scope.edit = function(){
if ( typeof $modelService.editables [$scope.model.selected] != 'undefined'){
$modelService.workingName = $modelService.editables [$scope.model.selected];
console.log ("Setting my working name to " + JSON.stringify( $modelService.workingName ) );
}else{
console.log ("Nothing Selected");
}
}
}]);
app.controller('modalsController', ['$scope','modelService', function($scope,$modelService) {
$scope.formModel = {};
$scope.formModel.name = "Hard coding works of course";
$scope.formModel.desc = $modelService.workingName.desc; //But I can't seem to get this to update. I thought pointing it at an object in the Model would be enough.
console.log("Firing up modalsController");
}]);
</script>
</html>
I spent the last two days mulling over this in my head and I think I figured it out. For starters, here's the (working) plunker:
https://plnkr.co/edit/Kt3rebPtvGTt0WMXkQW4?p=preview
Now, the explanation. I was trying to keep a separate 'formModel' object that kept track of the controller's state. But that's both silly and pointless.
Instead what you're supposed to do is:
a. Create an object in your service to hold all your data (I just called this 'model')
b. For each controller that needs to share data create a variable on the $scope of the controller and point it to your 'model' variable from your service.
c. after that use the variables from your model in your html.
So in both my controllers you'll find this line:
$scope.model = $modelService.model;
and in my HTML you'll find stuff like this:
<input type="text" class="form-control" id="name" ng-model="model.workingName.name"></input>
notice how I'm using "model.workingName.name"? This references $scope.model.workingName.name, which thanks to the line $scope.model = $modelService.model from my JavaScript now points directly to my model.
And that is how you "wire up" Angular.
By the way, experienced Angular folks have probably noticed that this part:
$scope.editables = [];
for ( name in $modelService.model.names){
$scope.editables.push( name );
}
probably belongs in a directive instead of a controller because I'm editing the DOM.
Stuff like that's what makes it so hard to learn AngularJS. There's so many concepts to get the hang of.
I have a array with image source. I need to show this images in ng-repeat. I am not able to fetch need assistance.
var images = ["http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}"]
html :
<div ng-repeat = "image in images">
{{image}}
</div>
You should use <img ng-src="{{image}}" /> and also wrap you image urls with single quotes(because there are double quotes in your URL).
var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
$scope.images = ['http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}'];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="image in images">
<img ng-src="{{image}}" />
</div>
</div>
I need to add and remove a class to an element on mouseover. The method below adds and removes classes from all elements with classname .blogOverlay and .newOverlay.
I need it to add/remove the class ONLY on the element that is being hovered over.
JS:
$scope.showReadMore = function(){
$('.blogOverlay').addClass("hidden");
$('.newOverlay').removeClass('hidden');
}
$scope.hideReadmore = function(){
$('.blogOverlay').removeClass("hidden");
$('.newOverlay').addClass('hidden');
}
HTML:
<div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" >
<a ng-click="goToPostDetail(post, $index)" >
<img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />
<div class="blogOverlay" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
<h2>{{ post.fields.title }}</h2>
</div>
<div class="newOverlay hidden" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
<h2>{{ post.fields.title }}</h2>
<h3>{{post.fields.date}}</h3>
<a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
</div>
</a>
</div>
There is no need to use jquery. Just use ng-class and add a condition to show or hide that class to your post. Se snipped how content is shown or hidden with the hidden class according to property post.readMore in the controller
angular.module('myapp', [])
.controller('foo', function($scope) {
$scope.post = {
readMore: true,
fields: {
title: 'The post title',
date: new Date()
}
}
$scope.showReadMore = function(post) {
post.readMore = true;
}
$scope.hideReadmore = function(post) {
post.readMore = false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="foo">
<div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" style="max-width: 400px">
<a ng-click="goToPostDetail(post, $index)">
<img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />
<div class="blogOverlay" ng-class="{'hidden' : !post.readMore}" ng-mouseover="showReadMore(post)" ng-mouseleave="hideReadmore(post)">
<h2>{{ post.fields.title }}</h2>
</div>
<div class="newOverlay" ng-class="{'hidden' : post.readMore}" ng-mouseleave="showReadMore(post)" ng-mouseover="hideReadmore(post)">
<h2>{{ post.fields.title }}</h2>
<h3>{{post.fields.date}}</h3>
<a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
</div>
</a>
</div>
</div>
</body>
</html>
give class name something like class="blogOverlay_{{$index}}" and then pass $index to JavaScript like showReadMore($index)
This way Your class names are unique and they will change for only index you want to change
You need not complicate much Check out the below css and live plunker
.blue{
background-color:blue;
}
.red{
background-color:red;
}
.blue:hover
{
background-color:yellow;
visibility:hidden
}
PLUNKER DEMO
Update 1 : Hides and shows
I'm new to this please bear with me
I'm trying to achieve div toggle and button class added when button clicked (active), i looked every where i been trying to do this for over 6 hours now :(.
here is my NAV div
<div id="sidebar-wrapper-button" ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="isInfo = !isInfo" ng-class="{'active':isInfo}"></li>
<li ng-click="isSetting = !isSetting" ng-class="{'active':isSetting}"></li>
</ul>
</div>
Content Div
<div ng-class="{'ng-show':isSetting,'ng-hide':!isSetting,'ng-hide':isInfo,}">
<h1>Setting</h1>
</div>
<div ng-class="{'ng-show':isInfo,'ng-hide':!isInfo,'ng-hide':isSetting}">
<h1>Info</h1>
</div>
app.js
//toggle Setting
app.controller('Main', function($scope) {
$scope.isSetting = false;
});
//toggle Info
app.controller('Main', function($scope) {
$scope.isInfo = false;
});
Thank you.
If I understood your request right, here's what I would do:
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.tabActive = null; // here insert 1, 2 or null depending on what the initial selection should be
});
li a{text-decoration: none;}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="tabActive = 1" ng-class="{'active':tabActive == 1}">
</li>
<li ng-click="tabActive = 2" ng-class="{'active':tabActive == 2}">
</li>
</ul>
<div ng-show="tabActive == 1">
<h1>Info</h1>
</div>
<div ng-show="tabActive == 2">
<h1>Setting</h1>
</div>
</div>
</div>
Simpler way is to use angular expression {{}} to output appropriate string:
<h1>{{isSetting ? 'Setting' : 'Info'}}</h1>
Requires less markup and less class change logic code and ultimately less scope watches
i don't know why i can't access to $scope inside $scope.menuPopUpDelete, i need to delete the clicked trip in the popup.
$scope.trips is not a global variable inside the controller??
I would appreciate some help please!
HTML:
<body ng-controller="mytripsController">
<ul class="my-trips-list" style="padding-bottom: 100px;" ng-model="trips">
<li class="my-trip-item module" ng-repeat="trip in trips" >
<div class="list-image">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Beach_pano.jpg">
<h1>{{trip.title}}</h1>
</div>
<div class="list-content">
<div class="menu-points" ng-click="showMenuPopUp($event)">
<img src="images/menu-points.png"/>
<div class="popup-menu" style="display: none">
<div ng-click="menuPopUpDeleteClicked($event,$index)">Eliminar</div>
</div>
</div>
</div>
</li>
</ul>
</body>
JS:
var mytrips = angular.module('mytrips',[]);
mytrips.controller('mytripsController', function ($scope) {
$scope.trips = [
{
"id":"1",
"title":"Plan de viaje Mallorca",
"island": "Mallorca",
"duration": "3",
"startDate":"19/10/2014",
"endDate":"21/10/2014",
"image":"fotoTrips.jpg"
},
{
"id":"2",
"title":"Plan de viaje Mallorca2",
"island": "Mallorca",
"duration": "3",
"startDate":"19/10/2014",
"endDate":"21/10/2014",
"image":"fotoTrips.jpg"
}
];
$scope.showMenuPopUp = function($event){
var $popup = $($event.currentTarget).find('.popup-menu');
$popup.show('fast',function(){
$('body').click(function(){
$popup.hide();
$(this).unbind("click");
});
});
}
$scope.menuPopUpDeleteClicked = function($event,$index){
}
});
I think your problem is more with the way you have your HTML structured than anything else. You clicks are getting gobbled up and never executed.
Try this, which seems to work just fine.
<div class="menu-points" ng-click="showMenuPopUp('popup1')">
<img src="images/menu-points.png"/>
</div>
<div id='popup1' class="popup-menu" style="display: none">
<div ng-click="menuPopUpDeleteClicked($event,$index)">Eliminar</div>
</div>
$scope.showMenuPopUp = function(name){
var $popup = $('#'+name);
$popup.show('fast',function(){
$('body').click(function(){
$popup.hide();
$(this).unbind("click");
});
});
}
$scope.menuPopUpDeleteClicked = function($event,$index){
console.log("inside here");
console.log($scope.trips);
}
Note that the popup is taken OUT of the enclosing div as the click event was getting gobbled up. The name of the popup we are popping up is passed in instead of the event.