I am using ng-show and ng-hide to show the banner for my page. When I am logged in I wanna show different banner than for logged out. So I have two div with ng-show and ng-hide whose value I am changing in the controller to true and false.
Html code:
First banner:
<div id="firstPageHeader" class="navbar navbar-inverse" role="navigation" ng-show={{display}}>
Second banner:
<div id="restPageHeader" class="navbar-header" ng-hide={{display}}>
Controller:
var LoginController = function($scope){
$scope.display = true;
$scope.loginUser = function(credentials){
console.log(credentials.username);
$scope.display = false;
}
$scope.logout = function(){
console.log('logout');
$scope.display = true;
}
So here according to login and logout the display value will change to true and false but its not happening the value remains only true.
So I want to know why the value is not getting changed even I used $scope.$apply()
ngShow and ngHide directives expect expressions. So it should be without curly braces {{ (which are used for expression interpolation):
ng-show="display"
Can you explain how you are using loginUser() and logout() , coz in my case it is working fine..
My index.html is :
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="switchcases"> <div ng-controller="LoginController">
<div ng-click="logout()">Hi</div>
<div ng-click="loginUser()">Bye</div>
<hr>
<div ng-show="display">Hi</div>
<div ng-hide="display">Bye</div>
</div>
</body>
</html>
and app.js is :
angular.module('switchcases',[])
.controller('LoginController',function($scope){
$scope.display = true;
$scope.loginUser = function(credentials){
//console.log(credentials.username);
$scope.display = false;
};
$scope.logout = function(){
//console.log('logout');
$scope.display = true;
};
});
Cases :: When I click Hi(the one above <hr> tag) , only the 'Hi' below <hr> tag is displayed and when i click Bye(the one above <hr> tag),only the 'Bye' below <hr> tag is displayed , as expected .
The default value displayed will be 'Hi' below the <hr> tag.
Just check once that if you are using loginUser() inside the scope of the controller.
You just need to replace braces in ng-hide and ng-show double quotes
<div id="restPageHeader" class="navbar-header" ng-hide="display">
I am login
<img src="https://marketplace.canva.com/MABY09l0-Tw/1/0/thumbnail_large/canva-outlined-lettering-border-tumblr-banner-MABY09l0-Tw.jpg" alt="">
</div>
<div id="restPageHeader" class="navbar-header" ng-show="display">
I am logout
<img src="https://img.clipartfest.com/08e6b6a7495aca9bbc478fcf662cd29b_welcome-hanging-banner-welcome-banner-clipart_935-311.jpeg" alt="">
</div>
this is controller
$scope.display = true;
$scope.loginUser = function () {
console.log('loginUser');
$scope.display = false;
}
$scope.logout = function () {
console.log('logout');
$scope.display = true;
}
Related
I have to hide a div on click .
<div ng-if="hideDiv">
<div>text text text text</div>
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
Controller
this.hideMe = function(action){
$scope.hideDiv = action;
}
tested results are
console.log($scope.hideDiv) // Is false
{{hideDiv}} <!--Is false-->
But still ng-if doesn't hide div ?
Please, test the snippet below. I'm pretty sure your problem is due to some angularJS configuration failure
(function(){
angular.module("app", []).controller("testController", function($scope)
{
$scope.showDiv = true;
$scope.hideMe = function(IsVisible)
{
$scope.showDiv = IsVisible;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testController">
<div ng-if="showDiv">
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
</div>
I have HTML code with inline element:
<span class="title" ng-click="update()">Rock</span>
How to replace this element on input element after click for edit?
And then after push enter on input return back span element?
I tried with directives ng-hide(), ng-show(). But I wonder
You can use either
<span class="title" ng-hide="isEdited" ng-click="update()">Rock</span>
or
<span class="title" ng-show="!isEdited" ng-click="update()">Rock</span>
or even
<span class="title" ng-if="!isEdited" ng-click="update()">Rock</span>
In any case you will want to reference something that can be truthy. For example in your controller you would have something like this in your function
/*the init function just makes sure that everything is setup
and nothing caries over from any local storage or anything
else you may be using*/
init();
init function(){
$scope.isEdited = false;
}
$scope.update = function(){
$scope.isEdited = true;
}
What you need to do is set a variable that contains the state;
<html>
<body ng-app="app">
<div ng-controller="mainController as $ctrl">
<span ng-if="!$ctrl.isInEditMode" class="title" ng-click="$ctrl.update()" ng-bind="$ctrl.spanText"></span>
<div ng-if="$ctrl.isInEditMode">
<input type="text" placeholder="Value for rock" ng-model="$ctrl.spanText" />
<button ng-click="$ctrl.update()">Done</button>
</div>
</body>
</html>
angular.module('app', [])
.controller('mainController', function($scope) {
this.isInEditMode = false;
this.spanText = 'Rock';
this.update = (function() {
this.isInEditMode = !this.isInEditMode;
}).bind(this);
});
I have prepared a Codepen that shows an possible solution: http://codepen.io/stefferd/pen/QdQrrv
I'm a bit of a newb at angular and having a persnickety issue. I am trying to update a variable bound to a div in my controller with a function, that is called when a button is clicked. (The function is bound to the button by ng-click.) When I click the button, the displayed value does not change, even though the variable is changed. However if I assign the same updating function to the element itself it does change when I click that element. Can anyone explain?
Here's my code:
Javascript
angular.module('Compendium',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/css',{
templateUrl:'css.html',
controller: 'cssCtrl'
})
}).controller('cssCtrl',function($scope,counterhelper){
//counterhelper($scope.data)
//counter.increment();
$scope.increment = function(){
alert('hey');
$scope.display = 'Nothing'
}
$scope.display = 1;
// var transform = function(){
//
}).factory('counterhelper',function(){
var addOne = function(val){
val ++;
}
return addOne;
})
and Html
<html ng-app = "Compendium">
<head>
<script src = "node_modules/angular/angular.js"> </script>
<script src = "node_modules/angular-route/angular-route.js"> </script>
<script src = "app.js"></script>
<script type="text/ng-template" id="css.html">
<h1 ng-controller = 'cssCtrl' ng-click='increment()'>
{{display}}
</h1>
<button ng-click = 'increment()' >Increment</button>
</script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Thanks!
Problem here is your controller is outside the button hence it does not recognize the controller attached, wrap it inside a div
<div ng-controller = 'cssCtrl'>
<h1 ng-click='increment()'>
{{display}}
</h1>
<button ng-click = 'increment()' >Increment</button>
</div>
I am using ng-switch as follows. Is this the proper usage of ng-switch? I don't want it to be in an array, because I am using it with a scope variable.
In my HTML I have defined it like below. The userRole being the variable I want my search to be based on, and in the when I have used values based on what my div tag contents should work with.
<div ng-switch on ="userRole">
<div ng-switch-when="admin">
[...]
</div>
<div ng-switch-when="user">
[...]
</div>
I am not able to access the functionality of ng-switch, and my entire content part just vanishes.
In my .js file I have defined the following:
if(loginModel.authorities[0].authority=="ROLE_ADMIN"){
console.log("Me here");
$scope.userRole="admin";
}
else
if(loginModel.authorities[0].authority=="ROLE_USER"){
$scope.userRole="user";
}
else{
$scope.userRole="guest";
}
But my screen does not show anything, which makes me wonder how should I use ng-switch. I do not want to use ng-hide / ng-show.
Here is a neat fiddle which i found on how ng-switch works.... The way you are using ng-switch is perfectly valid. I am guessing your userRole holds no value which is making it fail, can you double check on this.
<div ng-controller="LoginCheckCtrl">
<div ng-switch on="loginData">
<div ng-switch-when="false" ng-include="'login'"></div>
<div ng-switch-when="true" ng-include="'logout'"></div>
</div>
</div>
<script type="text/ng-template" id="login">
<button ng-click="login()">Login</button>
</script>
<script type="text/ng-template" id="logout">
<button ng-click="logout()">Logout</button>
</script>
Controller code:
var app = angular.module('myApp', []);
function LoginCheckCtrl($scope) {
$scope.loginData = false
$scope.login = function() {
console.log($scope.loginData ? 'logged in' : 'not logged in');
$scope.loginData = true;
};
$scope.logout = function() {
console.log($scope.loginData ? 'logged in' : 'not logged in');
$scope.loginData = false;
};
}
Fiddle
https://jsfiddle.net/mrajcok/jNxyE/
I've been following a course to learn angularjs and I can't seem to get a simple ng-click binding to work.
HTML:
<body ng-controller="MainController">
<div ng-app="githubViewer">
<h1>{{message}}</h1>
<div>{{ error }}</div>
{{username}}
<form name="searchUser">
<input type="search" placeholder="Username to find" ng-model="username" />
<input type="submit" value="Search" ng-click="search(username)" />
</form>
<div>
<div>{{user.name}}</div>
<img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">
{{user.gravatar_id}}
</div>
</div>
</body>
Javascript:
(function () {
var module = angular.module("githubViewer", []);
var MainController = function ($scope, $http) {
var onUserComplete = function (response) {
$scope.user = response.data;
};
var onError = function (reason) {
$scope.error = "Could not fetch the user";
$scope.reason = reason;
};
$scope.username = "angular";
$scope.message = "Github Viewer";
$scope.search = function (username) {
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
};
module.controller("MainController", MainController);
}());
When you click the search button (search for username "odetocode" or "robconery") it is supposed to display an image but the click event does not seem to be firing. I have searched the documentation and looked over the course again but I can't see what I'm doing wrong.
I'm currently using version 1.2.16 of angularjs.
You have the ng-controller declaration outside of the ng-app declaration right now:
<body ng-controller="MainController">
<div ng-app="githubViewer">
It should be the other way around, or have both on the same element
<body ng-app="githubViewer" ng-controller="MainController">
<div>
AngularJS evaluates your code, and checks for any directives you have declared from the ng-app element down, including the element it is declared on; This currently is missing the ng-controller directive, as it is placed on a parent element of the ng-app element.
You need to put the controller within the context of the module to have it within its scope.
Like so
<body ng-app="githubViewer" ng-controller="MainController">
Demo here