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.
Related
In my view I have a list of icons that when clicked, should call a function from the controller.
View
<div ng-controller="EditorController" class="main-div">
<aside>
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()"
data-ng-src="{{icon.source}}"
alt="{{icon.name}}"/>
</div>
</aside>
</div>
Controller
app.controller('EditorController', function($scope) {
$scope.EditorIcons = [ ... ];
$scope.changeme = function() {
console.log("changing");
}
}
I've seen this question asked before, yet I still wasn't able to find out the problem here. What am I doing wrong?
UPDATE
I've found the problem. I had a z-index of -1 on the aside element
Assuming that EditorIcons is a collection in your controller, and changeme is a method inside of your controller, the you need t remove the $parent:
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()"
ng-src="{{icon.source}}" alt="{{icon.name}}" />
</div>
Secondry you werte missing quotes " in your alt definition
Ok I just tried to make a fiddle and it works fine:
https://jsfiddle.net/pegla/8807dvrr/2/
<div ng-app>
<div ng-controller="SomeCtrl">
<aside>
<div ng-repeat="icon in EditorIcons">
<img ng-click="changeme()" data-ng-src="{{icon.source}}" alt="{{icon.name}}" />
</div>
</aside>
</div>
</div>
function SomeCtrl($scope) {
$scope.EditorIcons = [{
source: '',
name: 'icon-1'
}, {
source: '',
name: 'icon-2'
}];
$scope.changeme = function() {
console.log("changing");
}
};
So your problem has to be somewhere in declaration of controller or ng-app since code works, also check that data you have in editor icons is good.
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
I have a simple Angular code to show and hide a poppin, but every time I use it I am blocked in the function.
In my controller I have this to show the poppin :
$scope.showHidden = function() {
console.log('in')
$scope.showIt = true;
};
And this to hide it :
$scope.hideIt = function() {
console.log('out')
$scope.showIt = false;
};
And in my HTML :
<li class="beer_list_item beer_item" ng-repeat="beer in beers | filter : myFilter" ng-click="showHidden()">
<img ng-src="{{beer.img}} " alt="{{beer.alt}}" />
<div class="beer_list_item_desc" ng-show="showIt">
<h2 class="title1">{{beer.name}}</h2>
<img src="{{beer.img}}" alt="{{beer.alt}}"/>
<p>{{beer.desc}}</p>
<button class="btn" ng-click="hideIt()">Close</button>
</div>
</li>
If I click on the item the poppin appears, and when I click on the close btn, I see 'out' and 'in' in my logs, and the poppin never disappear.
I'm sure it's a stupid mistake, but I don't see it. If anyone have an idea.. thanks by advance !
You need to prevent the event propagation when click on hideIt:
<button class="btn" ng-click="hideIt();$event.stopPropagation();">Close</button>
This could be a refactoring:
function BeersCtrl($scope, beers) {
$scope.beers = beers;
$scope.showBeerList = true;
$scope.toggleBeerList = function(event) {
$scope.showBeerList = !$scope.showBeerList;
};
}
angular
.module('test', [])
.controller('BeersCtrl', BeersCtrl)
.value('beers', [
{ name: 'Peroni' },
{ name: 'Guinnes' }
])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<article ng-controller="BeersCtrl">
<div>
<button
ng-click="toggleBeerList($event)"
type="button">Toggle Beer List</beer>
</div>
<ul ng-show="showBeerList">
<li
ng-repeat="beer in beers">
<span ng-bind="beer.name"></span>
</li>
</ul>
</article>
</section>
The aboutus.html page is displayed correctly, except the content in the ng-repeat within media-list in aboutus.html. there are no errors displayed in the console. I have not included the entire code (since it takes more space.). Can anyone help me?
// factory here.
angular.module('vasuapp')
.factory('corporateFactory', function() {
// Implement two functions, one named getLeaders,
// the other named getLeader(index)
// Remember this is a factory not a service
var corpfac = {};
var leadership = [
{
id: 0,
name:"asdfd",
designation:"sgsdgg",
abbr: "fgdfvf",
},
{
// similarly some other data here.
} ];
corpfac.getLeader = function(){
return leadership;
};
corpfac.getLeaders = function(index)
{
return leadership[index];
};
return corpfac;
});
// app.js
angular.module('vasuapp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/aboutus', {templateUrl:'./aboutus.html' , controller: 'AboutController'})
.otherwise('/');
})
// controller.js
angular.module('vasuapp')
.controller ('AboutController',['$scope','corporateFactory', function($scope,corporateFactory){
var leadership = corporateFactory.getLeader();
$scope.leaders = this.leadership;
}])
// aboutus.html
<div class="row row-content">
<div class="col-xs-12 col-sm-9">
<h2>Corporate Leadership</h2>
<p> hi </p>
<ul class="media-list">
<li class = "media" ng-repeat = "lead in leaders">
<div class = "media-list tab-pane fade in active">
<a ng-href="#/aboutus">
<img class = "media-object" ng-src={{lead.image}} alt="author image">
</a>
</div>
<div class = "media-body">
<p>{{lead.description}}</p>
</div>
<footer>
-- {{lead.name}} the {{lead.designation}}
</footer>
</li>
</ul>
</div>
I think what you want is:
$scope.leaders = corporateFactory.getLeader();
this.leadership is not defined.
I have 2 popup's which is controller by a service in a page. on click on the div element i am calling the controller function. after i added the 2nd popup directive especially some times the ng-click not working properly. how to solve this?
here is my service.js
"use strict";
angular.module("tcpApp").service("modalService", function ( $rootScope) {
//header configuration
$rootScope.hideModal = function() {
$rootScope.showModal = false;
};
this.changePass = function ( configId ) {
$rootScope.showModal = true; //this is for global
$rootScope.currentConfigPopView = 'views/tools/'+configId+'.html';
$rootScope.$apply();
};
this.showSummary = function () {
this.showSummaryPop = true;
}
this.hideSummary = function () {
this.showSummaryPop = false; //this is within controller
}
});
html:
<div class="statusBoard board8" ng-click='modal.showSummary("board8")'>
<span><img src="../images/iconDetails.png" alt="icon plan and actual"></span>
<h2>{{boardAssets.board8.title}}</h2>
<span class="row dwo">
<span class="catg">Total Issue Reported</span>
<span class="cd issueData">{{contractor.IssueDetails.TotalIssue}}</span>
</span>
<span class="row mas">
<span class="catg">Issue Resolved</span>
<span class="cd resolveData">{{contractor.IssueDetails.IssueResolved}}</span>
</span>
<span class="row rfi">
<span class="catg">Issue Remaining</span>
<span class="cd remainData">{{contractor.IssueDetails.IssueRemaining}}</span>
</span>
</div>
<body-footer></body-footer>
<config-popup></config-popup> //after i added this directive getting ng-click issue.
<modal-popup></modal-popup>
config popup html:
<div class='ng-modal' ng-if="showModal">
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-dialog-content'>
<ng-include src="currentConfigPopView"></ng-include>
</div>
</div>
</div>