I have the following structure:
<html>
<head>
// additional info here
</head>
<body data-ng-app="myApp" data-ng-controller="contentController">
<div id="container">
<div id="id1">
//content here
</div>
<div id="id2">
//content here
</div>
<div id="id3">
//content here
</div>
<div id="page-content">
<div data-ng-view="">
//here will be loaded the other views
//Example: /profile, /login, /register, etc etc)
</div>
</div>
</div>
</body>
</html>
What I need is to hide the divs: id1, id2, id3 when the user navigates to specific pages like /login or register. For all other pages the divs: id1, id2, id3 should be visible.
At the moment when the user navigates to /login the divs: id1, id2, id3 content is shown with the login form so I have to hide it somehow.
The divs: id1, id2, id3 are common for all pages except for /login, /register and /forgot.
You can use the $locationChangeSuccess event broadcasted from the $rootScope to check the current route using the $route service. The advantage of this methodology, is that navigation through the use of the address bar can still be detected.
DEMO
JAVASCRIPT
.controller('contentController', function($scope, $rootScope, $route) {
var paths = ['/login', '/register', '/forgot'];
$rootScope.$on('$locationChangeSuccess', function() {
var $$route = $route.current.$$route;
$scope.contentVisibility = $$route && paths.indexOf($$route.originalPath) < 0;
});
});
HTML
<body data-ng-app="myApp" data-ng-controller="contentController">
<div id="container">
<div id="id1" ng-show="contentVisibility">
//content here
</div>
<div id="id2" ng-show="contentVisibility">
//content here
</div>
<div id="id3" ng-show="contentVisibility">
//content here
</div>
<div id="page-content">
<div data-ng-view="">
//here will be loaded the other views
//Example: /profile, /login, /register, etc etc)
</div>
</div>
<!-- list of routes bound within the anchor tags -->
<a ng-repeat="path in [
'/login', '/register', '/forgot',
'/other-route-1', '/other-route-2', '/other-route-3']"
ng-href="#{{path}}">{{path}}<br></a>
</div>
</body>
you should use data-ng-hide to hide your contents. however, you have to set the variable at start of your specific controller in order to hide the contents and in other controllers you should set it false to show the contents.
At the beginning of your specific controller:
var $scope.contentHide = true;
At the beginning of other controllers:
var $scope.contentHide = false;
<div id="id1" data-ng-hide="contentHide">
//content here
</div>
<div id="id2" data-ng-hide="contentHide">
//content here
</div>
<div id="id3" data-ng-hide="contentHide">
//content here
</div>
Related
I have following HTML structure
<% include header.html %>
<% include sidebar.html %>
<div class="robust-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row"></div>
<div class="content-body" ui-view></div>
</div>
</div>
<% include footer.html %>
I should do first login page, where just blank page with First Setup Wizard exists without header, footer and sidebar. In another pages they exists.
I'm willing use ui.router, but in that case I should wrap all page into ui-view.
Is it ok to wrap entire page into ui-view - including header and footer and then define it in every template if needed?
Asking it, because want to define header, footer and sidebar once somewhere. And just change contents later.
Solution is
app.js
app.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
templateUrl: './pages/index.html'
})
.state('dashboard.home', {
url: '/dashboard',
templateUrl: './pages/dashboard.home.state.html'
})
.state('setup', {
url: '/setup',
templateUrl: './pages/setupwizard/setupwizard.html',
controller: 'setupWizardController'
});
});
index.html
<div id="app" ui-view></div>
pages/index.html
<div ng-include="'pages/commons/header.html'"></div>
<div ng-include="'pages/commons/sidebar.html'"></div>
<div class="robust-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row"></div>
<div class="content-body" ui-view></div>
</div>
</div>
<ng-include src="'pages/commons/footer.html'"></ng-include>
pages/dashboard.home.state.html
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="widget-holder">
</div>
</div>
</div>
If user went to dashboard he'll never get to setupWizard(except first time), so headers etc loads once always.
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
Can anybody help me.
In index.html, I run ng-view, which code corresponds to Routing.js file. The menu calls two pages main.html and product.htm.
main.htm, has included another page called filterApp.html.
I need to hide a page element that is embedded main.html the filterApp.html. I have not succeeded.
If I take the include and put the code directly into main.html works. I read that ng-ng-hide and include not working properly. Is there anything I can do. I need to have it in separate files.
Here is the code of the pages.
Thank you so much
Index.html
<html ng-app="appDataBoard">
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
</li>
<li class="nav-item ">
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
Main.html
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'./template/filterApp.html'" ></div>
Product.html
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
filterApp.html
<div ng-hide="hselect1" >
<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >
</select>
</div>
Routing.js
// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl : 'template/main.html',
controller : 'mainController'
})
// route for the about page
.when('/product', {
templateUrl : 'template/product.html',
controller : 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
Check this plunker link. Its working fine for me.
https://embed.plnkr.co/RZDGdnFEq1SmT7F3ncZa/
If i am having One page with 2 tabs. and if from 2nd tab i am navigating to different page. then how to come back to that 2nd tab from navigated page? i am using $StateProvider.
Thanks.
Here is the example code and it works well,
index.html
----------------
<html>
<head>
<title>Tabs Directive</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
<script src="tabController.js"></script>
</head>
<body>
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Tab 1</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Tab 2</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Tab 3</h4>
</div>
</section>
</div>
</body>
</html>
tabController.js
----------------
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1;
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
Thanks Atul :)
but this solution worked for me.
we can have one flag varibale ilke "this.isPageVisited=false" in APPCONTEXT.js file. so that variable will be available throughout the project. so suppose from tab of one page i am going to different page, what i do is i set isPageVisited=true via setter method in visted page . so now to come back to tab page again, we check the variable if its true or not. if it is true we put the "active" class to the tab element.
so that the we can have current tab active from where navigation started.
I have a HTML page with different sections, which are loaded with AJAX. I have created a controller for each of the sections.
How is possible to bind the controller on a section which has been dynamically added on HTML?
I have found very complicated solutions, which i don't even know if they apply.
I need the most basic, easiest solution, something similiar with ko.applyBindings($dom[0], viewModel) for the ones who worked with KnockoutJs.
Index html
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container"><!-- load dynamic HTML here --></div>
</div>
</div>
Dynamic HTML
<div ng-controller="profile">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
Javascript:
var app = angular.module('app', []);
app.controller('profile', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
// load new HTML
// normally this is triggered by a link / button
$(function () {
$.get("/EditProfile/Profile", function (data, status) {
$("#container").html(data);
});
});
Don't use jQuery to embed html to your container. If you use jQuery, AngularJS can't track DOM manipulations and trigger directives. You can use ng-include directive of AngularJS.
In index.html file:
...
<div id="container">
<div ng-include="'/EditProfile/Profile'"></div>
</div>
...
If you want you can make that conditional:
...
<div id="container">
<div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div>
</div>
...
With that example, if you set profilePage variable to true, profile html will be load and render by ng-include.
For detailed info take a look to ngInclude documentation.
By the way, best practice to include views to your layout by triggering same link clicks is using routers. You can use Angular's ngRoute module or uiRouter as another popular one.
If you use ngRoute module, your index.html looks like that:
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container" ng-view><!-- load dynamic HTML here --></div>
</div>
</div>
And with a router configuration like below, profile html will be automatically loaded and rendered by ngRoute inside ngView directive:
angular.module('myapp', []).config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: '/EditProfile/Profile',
controller: 'ProfileController'
});
});