I am trying to set the ng-show variable isloggedout with the cookie Value, which is working (therefore the $scope.isloggedout is either true or false) which should trigger the ng-show or ng-hide which is clearly not working.
My App controller:
app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window',
function($scope, $http ,$location,$cookies,$cookieStore,$windows) {
$scope.isloggedout = $cookieStore.get('value');
}]);
My HTML:
<html ng-app="rjtApp" ng-controller="projectCtrl">
<div >
<ul class="nav navbar-nav navbar-right" >
<li></span></li>
<li></span></li></ul>
</div>
</html>
any help?
I tried your code and I can't well understand why you are doing so, using the ng-show directive only in the span. I can think that you want to either show or hide one button so I adapted your html:
<html ng-app="rjtApp" ng-controller="projectCtrl">
<body>
<div>
<ul class="nav navbar-nav navbar-right">
<li ng-show="isloggedout">Login <span class="glyphicon glyphicon-user"></span></li>
<li ng-hide="isloggedout">LogOut <span class="glyphicon glyphicon-user"></span></li>
</ul>
</div>
<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>
I will also advice you to confine the var inside the controller so that you won't dirt the scope. The controller will be:
app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window', function($scope, $http ,$location,$cookies,$cookieStore,$windows) {
var self = this;
self.isloggedout = $cookieStore.get('value');
}]);
and the HTML:
<html ng-app="rjtApp" ng-controller="projectCtrl as pc">
<body>
<div>
<ul class="nav navbar-nav navbar-right">
<li ng-show="pc.isloggedout">Login <span class="glyphicon glyphicon-user"></span></li>
<li ng-hide="pc.isloggedout">LogOut <span class="glyphicon glyphicon-user"></span></li>
</ul>
</div>
<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>
Related
I'm new in Angular. I have a simple application for routing pages in angular. I have two pages which I want angular to change the URL pages:
// item1.html:
<section>{{name}}</section>
// item2.html:
<section>{{details}}</section>
and this is my HTML home page:
<body ng-app="myApp">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</nav>
<div class="container" ng-view>
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
// routeApp.js:
var myApp = angular.module('myApp', [
"ngRoute",
'personController'
]);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'partial/item1.html',
controller:'ListController'
}).when('/item2',{
templateUrl:'partial/item2.html',
controller:'DetailsController'
}).otherwise({
redirect:'/'
});
}]);
// routeController.js:
var personController = angular.module("personController",[]);
personController.controller("ListController", function($scope){
$scope.name="Ali Qadomy";
});
personController.controller("DetailsController", function($scope){
$scope.details="Angular Developers";
});
I've spent more than two days looking at the problem but I can't find it.
any help ?
I have three bookmarks, two are on same page and one in different page, when ever I click on the link, it moving to same element and it was't smooth.
The frame works I am using are materializecss, angularjs 1 and ui router
I don't know how to write the code for it.
myapp.controller('ctrl',ctrl);
ctrl.$inject=['$scope', '$location', '$anchorScroll'];
function ctrl($scope, $location, $anchorScroll) {
$scope.scrollTo = function(team) {
$location.hash('team');
$anchorScroll();
};
$scope.scrollTo = function(contact) {
$location.hash('contact');
$anchorScroll();
};
};
<body ng-controller="ctrl">
<div class="container">
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large light-blue accent-2 pulse">
<i class="large material-icons">menu</i>
</a>
<ul>
<li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(home/project)">PROJECTS</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(team)">TEAM</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(contact)">CONTACT</a></li>
</ul>
</div>
</div>
Any help is appreciate.
Thank you.
You dont need to add multiple scrollTo function in controller, you can use only one function for all like this
myapp.controller('ctrl', ctrl);
ctrl.$inject = ['$scope', '$location', '$anchorScroll'];
function ctrl($scope, $location, $anchorScroll) {
$scope.scrollTo = function(state) {
$location.hash(state);
$anchorScroll();
}
};
And html is
<body ng-controller="ctrl">
<div class="container">
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large light-blue accent-2 pulse"> <i class="large material-icons">menu</i> </a>
<ul>
<li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('home/project')">PROJECTS</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('team')">TEAM</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('contact')">CONTACT</a></li>
</ul>
</div>
</div>
</body>
I'm newbie to angular world. I'm trying to create a login page.When the user login, i want to show some contents in the navbar.
Currently i'm using ng-show and ng-route. When i'm not using ng-route, ng-show works fine but when i use ng-route, ng-show is not working .I don't want to use angular-ui-router. What i'm doing wrong. Can anyone help me
Angular Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'ctrl'
})
.when('/logged', {
templateUrl: 'logged.html',
controller: 'ctrl'
})
otherwise({
redirectTo: '/'
});
}]);
app.controller("ctrl",['$scope','$http','$location',function($scope,$http,$location){
$scope.myvalue2=false;
$scope.login = function()
{
//here i making the $http.post to login on success im changing $scope.myvalue2=true;
}
}]);
HTML
<nav class="navbar-default navbar-dark bg-primary">
<div class="navbar">
<div class="container-fluid navi">
<div class="navbar-header" style="padding-bottom:10px">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="navbar-brand " style="list-style:none;padding-top:10px;"><li>name</li></ul>
</div>
<div ng-show="myvalue2" class="ng-cloak">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I don't think that ngRoute would have any impact on ng-show. It's working fine check this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.myvalue2 =false;
$scope.login = function() {
$scope.myvalue2=true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<a ng-click="login()">Login</a>
<div ng-show="myvalue2">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
You're going to want to use the digest cycle here, and do away with ng-show, since its use gets easily mistaken for the more elegant and simpler-to-understand ng-if.
In short:
AJAX calls will trigger a digest cycle.
ng-if will actively remove DOM if its condition is not met, thus drawing less DOM.
Changing the value on an AJAX call in an ng-if will work instead of hiding the DOM element, since it'll be eligible to be visible anyway.
The ng-cloak class is throwing me off; you probably don't need that there, since with ng-if, it won't be anywhere in the DOM until you actually need it.
What your controller might look like:
app.controller("ctrl", [
'$scope',
'$http',
'$location',
function ($scope, $http, $location) {
$scope.myvalue2 = false;
$scope.login = function () {
$http.get('/path/to/your/request', function(data) {
$scope.myvalue2 = true;
});
}
}]);
What your DOM would need to change to (and yes, I prefer absolute truth to truthiness):
<div ng-if="myvalue2 === true">
This will help you,
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
I want to convert my angular pages, I am using ng-includes but my pages has .html extensions, I would like have just /mypage
sample:
www.mypage.com/projects.html
I want archive this:
www.mypage.com/projects
html
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html">logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- header -->
<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>
<footer class="footer">
<div class="container text-center">
footer
</div>
</footer>
js:
var App = angular.module('App', []);
App.controller('ProjectCtrl', function($scope, $http) {
$http.get('app/projects.json')
.then(function(res){
$scope.projects = res.data;
});
});
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/projects', {
templateUrl : 'projects.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
js fiddle: https://jsfiddle.net/3ww49zq7/
how can make it?
thanks.
At the first you will need to use ngRoute and declare it as a dependency in your module
var App = angular.module('App', ['ngRoute']);
Then you can use routeProvider
Second :
You should use the ng-view directive to tell the angular that this div will be used to load the views.
<div ng-view></div>
Third :
You should change your links to the same in the routeprovieder
<li class="active">Home</li>
<li>Projects</li>
should be
<li class="active">Home</li>
<li>Projects</li>
and you should make sure that these links match the case in the routeProvider Object.
You should declare the controller you are using in the routeProvider
here is a plunker to demonstrate :.http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview
I am an angular newbie. Fiddling around with $scope.
I have this snippet in my main view:
<div ng-controller="MainCtrl" class="ng-scope">
<ul class="nav navbar-nav navbar-right">
<li></span><span class="badge">{{ badgeCount }}</span></li>
</ul>
</div>
....
<div class="container">
<ui-view></ui-view>
</div>
home.html gets loaded through ui-view.
Inside home.html, I have
<div ng-repeat='item in items'>
<td> <button type="submit" class="btn btn-default btn-lg btn-success" ng-model="orderCnt" ng-click="placeOrder(item.desc)"><span class="glyphicon glyphicon-cutlery"></span></button> </td>
</div>
The controller is MainCtrl.
My controller is:
controller('MainCtrl', ['$scope', function($scope, menus) {
$scope.items = [];
$scope.badgeCount = 0;
$scope.orderCnt = 0;
console.log("badgecount=",$scope.badgeCount)
console.log("ordercnt=",$scope.orderCnt)
$scope.placeOrder = function(value) {
$scope.orderCnt ++;
console.log(value)
console.log($scope.orderCnt)
console.log("ng click")
};
$scope.$watch('orderCnt', function(newVal, oldVal){
console.log(newVal + " " + oldVal);
$scope.badgeCount++;
console.log("watch")
},true);
For any ng-click on placeOrder, I would expect the badgeCount to get updated on the shopping cart icon as well. Its not happening. Do I need to emit/broadcast this since its a different view? I was thinking since both have same controllers, same $scope would be bound. Any help would be appreciated.
Is your container div a child of the <div ng-controller="MainCtrl" class="ng-scope">? If not then they will have different scopes. Changes in one will not be seen in another.
Some other points
you don't need ng-model defined on the button, doesn't make sense cause it doesn't get changed.
why are you watching orderCnt in this case? It only changes in scope.placeOrder so you can call $scope.badgeCount++; in scope.placeOrder
EDIT: If you want the view to have the same scope you can place it as a child of the main controller. Also note that you're missing a > in your definition of <a href"#"
<body ng-controller="MainCtrl">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-shopping-cart gi-2x"></span><span class="badge">{{ badgeCount }}</span></li>
</ul>
<div class="container">
<ui-view></ui-view>
</div>
</body>