I am trying to make a simple app with angular and I can't seem to figure how to hide content when I click links in navigation bar
<body ng-controller="MainCtrl">
<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper teal lighten-1">
<i class="material-icons">dashboard</i>
<ul class="left">
<li class="waves-effect waves-light"><i class="material-icons">search</i>
</ul>
<ul class="right">
<li class="waves-effect waves-light"><i class="material-icons">perm_identity</i>
</ul>
</div>
</nav>
</div>
<div ng-hide>
<H1> must not show</H1>
</div>
<div ng-include="template">
</div>
</body>
Main controller:
var app = angular.module('Testing', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
var classApp = angular.module('classApp', []);
classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
When I click middle logo I want the content of body in this case "Must not show" should be hidden and display the template I'm using on body. Thanks
You need to bind the visibility to some scope variable; to show you can use:
<i class="material-icons">dashboard</i>
to hide you can use:
<li class="waves-effect waves-light"><i class="material-icons">search</i>
In your controller you define the function showTemplate like:
$scope.showTemplate = function(templateName, hideContent) {
$scope.template = templateName; //template to show
$scope.hideSection = hideContent; //true or false to hide/show the content
}
In this function you set the visible template and you hide or how some other section.
Then you need to bind the section you want to hide to hideSection variable:
<div ng-hide="hideSection">
<H1> must not show</H1>
</div>
ng-hide alone without any variable bound will not work
Related
I'm alternating between two windows in angularjs using ng-click and ng-show :
<div ng-init="showTab2 = false">
<a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
</div>
<div ng-init="showTab2 = true">
<a ng-click="showTab1 = true; showTab2 = false">#Tab2</a>
</div>
then with ng-show they appear
Could you please tell me how I can change the color of the tab selected ?
Thank you
I'm not sure how your ng-show fits here but use ng-class to toggle css:
<a ng-class = "{'some-class': showTab1}"
ng-click="showTab1 = true; showTab2 = false">#Tab1</a>
Please check working example here: Example
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showTab = 1; //If you want to select default tab
});
HTML
<div>
<a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
<a ng-click="showTab = 2" ng-class="{'active': showTab == 2}">#Tab2</a>
</div>
<div ng-switch="showTab">
<span ng-switch-when="1">Tab1</span>
<span ng-switch-when="2">Tab2</span>
</div>
CSS
.active {
color: red;
}
var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
this.tab = 0;
this.subTab = 0;
this.like = 0;
this.selectLike = function(setTab) {
this.like= setTab;
};
this.selectTab = function(setTab) {
this.tab= setTab;
};
this.selectSubTab = function(setTab){
this.subTab = setTab;
};
this.isSelected = (function(checkTab){
return this.tab === checkTab;
});
this.isSelectedSub = (function(checkTab){
return this.subTab === checkTab;
});
this.isSelectedLike = (function(checkTab) {
return this.like === checkTab;
});
});
app.controller('FormController', function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = '';
}
};
});
app.directive('replyBox', function(){
return {
restrict:'A',
templateUrl:'../templates/reply-box.html'
};
});
app.directive ('commentSection', function(){
return {
restrict:'A',
scope :{},
templateUrl:'../templates/comment-section.html'
};
});
<body ng-app="myDiscuss">
<div class="container">
<div class="row">
<div>
<div class="thumbnail" ng-controller="TabController as tabs">
<div ng-show="tabs.isSelectedLike(1)">
</div>
<section class="caption">
<ul class="nav nav-pills">
<li ng-class="{ active:like === 1 }" >
<a href ng-click="tabs.selectLike(1)">Helpful</a>
</li>
<li ng-class= "{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)">Comment</a>
</li>
</ul>
<div comment-section ng-show="tabs.isSelected(2)"></div>
</section>
</div>
</div>
</div>
</div>
</body>
<!--comment-section.html-->
<div class="panel" >
<form ng-submit="submit()" ng-controller="FormController">
<blockquote ng-repeat="(index,object) in people" >
<ul class="nav nav-pills">
<li ng-class="{ active:subTab === 3 }" >
<a href ng-click="tabs.selectSubTab(3)">Helpful</a>
</li>
<li ng-class= "{ active:subTab === 4}">
<a href ng-click="tabs.selectSubTab(4)">Reply</a>
</li>
</ul>
<div reply-box ng-show="tabs.isSelectedSub(4)"></div>
</blockquote>
<input type="text" ng-model="person.name" name="person.name" />
</form>
</div>
<!-- reply-box.html -->
<div>
<input type="text">
</div>
When I add the reply-box directive to the comment-section directive it does not perform the 'submit' action. When the "reply" link in the commentSection directive is clicked, the ng-show directive does not working for the reply-box directive.
Well I don't see any input type='submit' in your code, maybe thats why ng-submit is not working,
Moreover i think your ng-show directive isn't working because the ng-controller="TabController as tabs" ends here
<div class="thumbnail" ng-controller="TabController as tabs">
<div ng-show="tabs.isSelectedLike(1)">
</div>
<section class="caption" >
<ul class="nav nav-pills">
<li ng-class="{ active:like === 1 }" >
<a href ng-click="tabs.selectLike(1)">Helpful</a>
</li>
<li ng-class= "{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)">Comment</a>
</li>
</ul>
<div comment-section ng-show="tabs.isSelected(2)"></div>
</section>
</div>
Thus you are calling your ng-show="tabs.isSelectedSub(4)" wont return any thing because this method is not defined in your FormController.
Hope it helps.
The errors occur because the scope for the comment section directive does not inherit from the parent scope.
Define a scope that inherits from the parent scope
To inherit from the parent scope, you'll need to set the scope property of the comment-section directive to true.
From the AngularJS documentation:
scope: true - the directive creates a new child scope that prototypically inherits from the parent scope. If more than one directive (on the same DOM element) requests a new scope, only one new child scope is created. Since we have "normal" prototypal inheritance, this is like ng-include and ng-switch, so be wary of 2-way data binding to parent scope primitives, and child scope hiding/shadowing of parent scope properties.
The comment-section directive can be rewritten thus:
app.directive ('commentSection', function(){
return {
restrict:'A',
scope :true,
templateUrl:'../templates/comment-section.html'
};
});
I'm using pageslide directive in order to display a lateral sliding menu when I click on an icon.
This is the usual way to do it, and its working :
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<div pageslide ps-open="s.isActive" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="s.toggle()" class="button" >Close</a>
</div>
</div>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
But I would lilke to make the menu content in an external template, so I'm trying this :
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<menu-item isActive="s.isActive"></menu-item>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
with this as menu.html :
<div pageslide ps-open="s.isActive" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="s.toggle()" class="button" >Close</a>
</div>
</div>
also, here is the related controller :
'use strict';
angular.module('BalrogApp').controller('slideController', function(){
this.isActive= false; // This will be binded using the ps-open attribute
this.toggle = function(){
this.isActive= !this.isActive
}
});
and the <menu-item> directive :
angular.module('BalrogApp').directive('menuItem', function () {
return {
restrict: 'E',
templateUrl: "views/menu.html",
scope: {
isActive: '='
},
controller: 'slideController',
controllerAs: 's',
bindToController: true
}
});
So it's not working this way, maybe it is because the main view (including the <menu-item>) is itself included in the main page thanks to <ng-view> ?
Or maybe the pageslide-directive requires the <div pageslide ...> and its parent element to be on the same file ?
I can tell from the console that toggle() is called and changes isActive in both cases but it's not opening the menu with the directive version.
And also, adding ng-controller="slideController as s" to the root <div> with the pageslide attribute didn't change anything.
So how can I make this work with the menu in another file ?
Did you try to replace <div ng-include="menu.html"></div> with <div ng-include="'menu.html'"></div>. According to https://docs.angularjs.org/api/ng/directive/ngInclude, you have to wrap string constants in single quotes.
I highly recommend you not use ng-include. You can get the same approach using directive instead.
For example:
Menu html
<div pageslide ps-open="vm.checked" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="vm.toggle()" class="button" >Close</a>
</div>
</div>
Directive:
function Controller() {
}
Controller.prototype.toggle = function() {
this.checked = !this.checked;
}
angular
.module('BalrogApp')
.directive('menuItem', function() {
return {
templateUrl: 'urltomenu.html',
restrict: 'E',
scope: {
checked: '='
},
controller: Controller,
controllerAs: 'vm',
bindToController: true
}
})
Main template
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<menu-item checked="s.checked"><menu-item>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
This approach give you more power. All the logic is inside the directive controller and you could reuse this element each time. The scope attribute checked is the "bridge" between your main template if change outside also change inside and also the other way.
okay, so I am building a web-app using angular.js. I have started to implement user authentication.
I did this with it's own controller:
app.controller("userControl", ["$http", "share", function($http, share){
this.login = {};
var user = this;
this.doLogin = function(){
this.login.fn = "login";
$http.post('classes/main.php', user.login).success(function(data){
console.log(data.Error);
if(data.Error == undefined){
alert("Success");
share.user = data;
window.location.href = "#memberHome";
}
});
}
}]);
and I have a member's page with it's own controller:
HTML:
<div id="memberHome" data-role="page" ng-controller="member-Ctrl as member">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<p class="navbar-brand" href="#">Calendar</p>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Overview</li>
<li>Friends</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Logged in as: {{member.user.forename + " " + member.user.surname}}</li>
<li><span class="glyphicon glyphicon-log-in"></span> Log Out</li>
</ul>
</div>
</nav>
<div data-role="content">
<calendar selected="day"></calendar>
</div>
</div>
javascript:
app.controller("member-Ctrl", ["share", function(share){
this.user=share.user;
}]);
I need the User controller to tell the member controller the details of the new user.
I googled this and looked at the answers of a similar question, which led me to This
and i created a service as shown in the video:
app.service("share", function(){
this.user = {}
});
Now whenever i login and get redirected to the memberHome page, it tells me Logged in as:
Can anybody see why this might be?
I am very new to Angular, and am learning, just about, everything when I need it.
I should probably say that i am using jQuery Mobile (for a multi-page document) and Bootstrap 3
You can use a service to share information between controllers or use the $rootScope
var app = angular.module('mymodule',[]);
app.controller('Controller1', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showImages = true;
}]);
app.controller('Controller2', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showImages = false;
}]);
And in the template:
<div ng-controller="Controller1">
<div class="images" ng-show="$root.showImages"></div>
</div>
I'm building a MEAN SPA and the current page I'm working on displays the users in the database. I'm pretty new to Angular so I'm still trying to wrap my head around it.
I have a parent container of which the content is controlled by an <ng-switch> and switches to show the relevant content depending on whether the user has clicked 'view all' or 'add new'. This works fine.
What I'm aiming to do now is when the user clicks on a user that's displayed in 'view-all', I want the content to switch to a view containing that users details where they can then go and edit the profile etc. What would be the best way to achieve this?
My HTML is set up like so:
Main staff view
<div class="staff" ng-controller="staffController">
<div class="side-menu">
<h2>Staff</h2>
<ul>
<li><a ng-click="tab='view-all'"><i class="fa fa-user"></i> View All</a></li>
<li><a ng-click="tab='add-new'"><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
<div class="page-content" ng-switch on="tab">
<div ng-switch-when="view-all" class="tab-content">
<staff-view-all></staff-view-all>
</div>
<div ng-switch-when="add-new" class="tab-content">
<staff-add-new></staff-add-new>
</div>
</div>
</div>
Directives:
.directive('staffViewAll', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/view-all.ejs'
}
})
.directive('staffAddNew', function () {
return {
restrict: 'E',
templateUrl: 'partials/staff/add-new.ejs'
}
})
view-all.ejs
<h2>View all staff</h2>
{{ users.length }} users in system
<ul>
<li ng-repeat="user in users"> <!-- click this and you see the singular view -->
<img ng-src="{{user.avatar}}?dim=100x100" />
<h3>{{user.username}}</h3>
<h4>{{user.email}}</h4>
</li>
</ul>
Use another ng-switch to switch to detailed view for the selected user.
Something like this: jsfiddle
<div ng-switch-when="list">
<ul>
<li ng-repeat="fruit in fruits">
{{fruit}}
</li>
</ul>
</div>
<div ng-switch-when="details">
<p>Details for {{ selectedFruit }}</p>
Back to list
</div>
Controller:
$scope.showDetail = function (fruit) {
$scope.selectedFruit = fruit;
$scope.moduleState = 'details';
}
$scope.showList = function()
{
$scope.moduleState = 'list';
};