The following code is not hiding span, How can i hide the span.i am asking this question as i am new to angularjs.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$scope.myVar=true;
</script>
<body ng-app="" >
<span ng-hide="myVar">
<a href="adminPage">Click here for admin role</a>
</span>
</body>
</html>
You need a module first, then a controller or a directive.
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("myApp")
.controller("myController", function ($scope) {
$scope.myVar = true;
});
</script>
<body ng-controller="myController">
<span ng-hide="myVar">
<a href="adminPage" ng-click"myVar = !myVar">Click here for admin role</a>
</span>
</body>
</html>
You haven't bootstrapped your application properly to make it an Angular app.
You need to write your very first "Hello, World!" app using AngularJS as it very common writing a "Hello, World!" application when you're getting started with any technology.
ng-app directive is used to define the part of the HTML which will be an Angular app, it's value is an optional application module name to load. See this post about using-ng-app-without-a-value
Show or hide content using Angular 1.0.1 without specifying the main module in the ng-app directive
//angular
//.module('demo', [])
//.controller('DefaultController', DefaultController);
//DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
<a href="#">Click here for admin role</a>
</span>
<span ng-hide="isAdmin">
<a href="#">Click here for user role</a>
</span>
</div>
</div>Please check the below example using $scope object to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
<a href="#">Click here for admin role</a>
</span>
<span ng-hide="isAdmin">
<a href="#">Click here for user role</a>
</span>
</div>
</div>Please check the below example using controller aliasing syntax, to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.isAdmin = false;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<span ng-show="ctrl.isAdmin">
<a href="#">Click here for admin role</a>
</span>
<span ng-hide="ctrl.isAdmin">
<a href="#">Click here for user role</a>
</span>
</div>
</div>
