AngularJS context menu to show closest next div only - angularjs

How to show the context menu related div on my on click function? How to find the closest next div class and make visible on click on the button event, instead of showing all the div having the same classes.
Please note below my HTML and js also the fiddle link for reference:
http://jsfiddle.net/4WK7R/274/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">11111111</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">22222222</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert()">Click me</button>
<div ng-show="myvalue" class="ng-cloak">333333333</div>
</div>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.myvalue = false;
$scope.showAlert = function(){
$scope.myvalue = true;
};
}

This is what you want i think:
<div ng-app>
<div ng-controller="MyCtrl">
<div class="row">
<button id="mybutton" ng-click="showAlert('div1')">Click me</button>
<div ng-show="div1" class="ng-cloak">11111111</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert('div2')">Click me</button>
<div ng-show="div2" class="ng-cloak">22222222</div>
</div>
<div class="row">
<button id="mybutton" ng-click="showAlert('div3')">Click me</button>
<div ng-show="div3" class="ng-cloak">333333333</div>
</div>
</div>
function MyCtrl($scope) {
$scope.showAlert = function(show){
//edited
$scope[show] ? $scope[show] = false: $scope[show]= true;
//$scope[show] = true;
};
}

Tabs:
function MyCtrl($scope) {
$scope.tabs = [{
title: "tab1",
show: true
}, {
title: "tab2",
show: false
}, {
title: "tab3",
show: false
}, ]
$scope.tabAction = function(tab) {
angular.forEach($scope.tabs, function(tab) {
tab.show = false;
});
tab.show ? tab.show = false : tab.show = true;
}
};
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-repeat="tab in tabs">
<div ng-show="tab.show">{{tab.title}}</div>
<button ng-hide="tab.show" ng-click="tabAction(tab)">
open {{tab.title}}
</button>
<hr>
</div>
</div>

Related

How to show current data from array to boostrap modal in vue.js

--Question--
--Question--
Hi, I'm a noob programmer who is trying to build a Vue web app. I have a problem where I have an array with json data that I loop through and pass to a component, but in that component, I have a bootstrap modal that I wanna show the current data.
It works but when I click the modal it only shows the first obj in the array (0) so it doesn't continue? Can someone please help me with this problem? I hope you guys understand my question, thanks.
---Page CODE (Parent)---
<template>
<div class="content">
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-sm-1 col-md-1 col-xl-0"></div>
<div class="col-sm-12 col-md-10 col-xl-12">
<h1 id="TreePageTitle"> Text here </h1>
<div id="grid">
<TreeCard
data-toggle="modal"
data-target="#exampleModalScrollable"
v-for="tree in treeArray"
:key="tree.id"
:tree="tree"
/>
</div>
</div>
<div class="col-sm-1 col-md-1 col-xl-0"></div>
</div>
</div>
</div>
</template>
<script>
import TreeCard from "../components/TreeCard.vue";
export default {
name: "Trees",
components: {
TreeCard
},
data() {
return {
treeArray: [],
errors: []
};
},
mounted() {
try {
this.treeArray = [
{
id: 0,
name: "obj name 1",
image:
"image url here",
description: "test 1"
},
{
id: 1,
name: "obj name 2",
image:
"image url here",
description: "test 2"
}
];
}
catch (error) {
console.log(error);
}
}
};
</script>
---Component CODE (Child)---
<template>
<div>
<div class="card" v-on:click="toggle">
<img :src="tree.image" class="img-fluid" id="CardImg" />
<h2 class="card-title">{{tree.name}}</h2>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalScrollable"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalScrollableTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">{{tree.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{tree.description}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Card",
data() {
return {
bodyID: {}
};
},
props: {
tree: {}
},
methods: {
toggle: function() {
this.bodyID = this.tree.id;
}
}
};
</script>
You just need to make sure the element id's are unique, as jQuery uses these id's to trigger the modal.
:id="'exampleModalScrollable'+tree.id"
:data-target="'#exampleModalScrollable'+tree.id"
working example
You might want to consider bootstrap-vue which doesnt rely on jQuery and works more directly with Vue.

Angularjs enable checkbox when click on href

I want to enable checkbox when click on
Google
My html code is given below
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showError">
<div class="text">Please fix the validation error(s) below and try again</div>
</div>
<div class="error-msg" ng-show="serviceErrorMsg">
<div class="text">{{serviceErrorMsg}}</div>
</div>
<header class="security-header">
<img src="images/lock.png" alt="Security" class="security">
</header>
<main class="sm-main">
<section class="fix-section security">
<h1>Security and privacy is important to us </h1>
<p>Please read the Google</p>
<label class="control control--checkbox m-t-45">I confirm that I have read, understood and agree to
the above
<input type="checkbox" ng-model="terms.agreed"/>
<div class="control__indicator"></div>
</label>
<span class="error" ng-if="showError">Please select checkbox</span>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
My controller code is given below
.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
$scope.terms = {
agreed: false
}
$scope.showLoader = false;
$scope.proceed = function () {
if (!$scope.terms.agreed) {
$scope.showError = true;
return;
}
$scope.showLoader = true;
}
}
So I want that when anyone click on Google link only after that my checkbox has to be enable.
You can have an variable and an event handler function in the controller like
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
}
And on the a attach an event handler and use ng-disabled directive on the input
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
Working example
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>

using ng-if to make p appear if image is null

I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});
<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Here, I made working example for that plz check below link.
https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/
Plz check that.
<div ng-app="ImageDisplay">
<div id="logo" ng-controller="ImageController">
<div>
<h3>
First Image
</h3>
<img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
<div ng-if="selected_.image1 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
<div>
<h3>
Second Image
</h3>
<img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" /> </div>
<div ng-if="selected_.image2 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
</p>
</div>
</div>
</div>
var app = angular.module('ImageDisplay', []);
app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
$scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
// alert($scope.selected_.image1);
$scope.selected_.image2 = '';
$scope.discardIntroPage = function() {
alert('Add Photo');
}
});

angular-ui-tree collapse/expand not working

I try to use angular-ui-tree, but collapse not working. I use example from their github with minor changes, but id did not help.
My example:
http://plnkr.co/edit/MIMQ0GWnhQnZ1AhhKzo5?p=preview
<body ng-controller="tCtrl">
<div class="tree">
<div class="row">
<div class="col-sm-12">
<h3>Basic Example</h3>
<button ng-click="expandAll()">Expand all</button>
<button ng-click="collapseAll()">Collapse all</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-tree="" id="tree-root">
<ol ui-tree-nodes="" ng-model="listss">
<li ng-repeat="t in listss" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button data-nodrag="" ng-click="toggle(this)">saad</button>
{{t.name}}
</div>
<ol ui-tree-nodes="" ng-model="t.list" ng-class="{hidden: collapsed}">
<li ng-repeat="s in t.list" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button ng-click="toggle(this)">sad</button>
{{s.name}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
You miss CSS class. Please, insert your file CSS.
.hidden {
display: none!important;
visibility: hidden!important;
}
Github use bootstrap.min.css
Try the following things:
add some options from in your controller:
$scope.treeOptions = {
accept: function (sourceNodeScope, destNodesScope, destIndex) {
return false;
},
};
2.get the treeview:
var getRootNodesScope = function () {
return angular.element(document.getElementById("tree-root")).scope();
};
add the collapse / expand functions to your controller:
$scope.collapseAll = function () {
var scope = getRootNodesScope();
scope.collapseAll();
};
$scope.expandAll = function () {
var scope = getRootNodesScope();
scope.expandAll();
};
Replace the following line :<div ui-tree="" id="tree-root">
with div ui-tree="treeOptions>"
5.Optional: Place the id="tree-root" on your <ol> element.

Closing all open Bootstrap modals in AngularJS?

I have created a modal that opens another modal. I want to use the second modal as a confirmation box to close the first one. I cant get it to close both modals when I click ok on the confirmation box (the second modal).
Tree.html:
<script type="text/ng-template" id="tree_item_renderer.html">
<div class="bracket-match" ng-class="match.tier == 1 ? 'bracket-match-final' : ''">
<p ng-show="match.tier == 1" class="finale-title">Finale</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
<div ng-show="match.tier == 1 && showthirdplace && tierCount >= 2" class="third-place" ng-model="thirdplace">
<p class="finale-title">3. plads</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
</div>
</div>
<div class="bracket-column">
<div ng-repeat="match in match.previousMatches" ng-include="'tree_item_renderer.html'" />
</div>
</script>
<script type="text/ng-template" id="tournament-tree.html">
<div class="row modal-footer-btns">
<button class="btn btn-primary" ng-click="ok()">GEM</button>
<button class="btn btn-warning btn-xs" ng-click="openAlertBox()" type="button" data-dismiss="modal">LUK, uden at gemme</button>
</div>
<div class="row" style="margin-bottom:15px;">
<a ng-click="addMatchTier()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="removeMatchTier()" ng-class="tierCount > 1 ? 'btn btn-primary' : 'btn btn-default'"><i class="glyphicon glyphicon-minus"></i></a><br />
</div>
<div class="row tournament-tree">
<div ng-repeat="match in finalMatch">
</div>
<div class="bracket-column">
<div ng-repeat="match in finalMatch" ng-include="'tree_item_renderer.html'"></div>
</div>
</div>
</script>
<script type="text/ng-template" id="openAlertBox.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Ja</button>
<button class="btn btn-warning" ng-click="cancel()">Annuller</button>
</div>
</script>
Categories.html:
<div class="row">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
</div>
<div ng-controller="CategoriesController">
<a ng-click="add()" class="btn btn-tree btn-primary" style="margin-top:15px;">Tilføj hovedkategori</a>
<p ng-repeat="data in nodes" ng-include="'category_item_renderer.html'"></p>
<ng-include src="'Modules/TournamentTree/Tree.html'"></ng-include>
</div>
<script type="text/ng-template" id="category_item_renderer.html">
<div class="category-style">
<div class="push-cat-btn">
<a ng-click="add(data)" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon glyphicon-plus"></i></a>
<a ng-hide="data.nodes.push()" ng-click="openTournamentTree(data)" class="btn btn-info btn-xs">Turnering</a>
</div>
</div>
<p class="push" ng-repeat="data in data.nodes" ng-include="'category_item_renderer.html'"></p>
</script>
<script type="text/ng-template" id="TournamentTreeModal.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="include-tree" ng-include="'tournament-tree.html'"></div>
</div>
<div class="modal-footer">
</div>
</script>
TreeController.js:
angular.module('tournamentTree', ['ui.bootstrap']);
angular.module('tournamentTree').controller("TreeController", ['$scope', '$modal', '$modalInstance', 'guidGenerator', function ($scope, $modal, $modalInstance, guidGenerator) {
$scope.openAlertBox = function () {
var alertBoxInstance = $modal.open({
templateUrl: 'openAlertBox.html',
controller: 'TreeController',
scope: $scope,
size: 'xs',
resolve: {
}
});
};
$scope.ok = function () {
$scope.close();
$scope.$parent.close();
}
$scope.cancel = function () {
$scope.close();
$scope.$parent.dismiss('cancel');
};
categoriController.js:
angular.module('tournamentCategories').controller("CategoriesController",
['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service", 'TournamentCategoryModelFactory',
function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) {
$scope.openTournamentTree = function () {
var modalInstance = $modal.open({
templateUrl: 'TournamentTreeModal.html',
controller: 'TreeController',
scope: $scope,
size: 'wide-90',
backdrop: 'static',
keyboard: false,
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
//$scope.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
You can use $modalStack from ui.bootstrap to close all instances of $modalInstance
$modalStack.dismissAll(reason);
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.

Resources