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">
Click here for admin role
</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">
Click here for admin role
</span>
</body>
</html>
You haven't bootstrapped your application properly to make it an Angular app.
You need to create a main module
You need to attach the main module to the shell/index.html
You need a Controller to perform data-binding, user interactions, etc
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">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</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">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</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">
Click here for admin role
</span>
<span ng-hide="ctrl.isAdmin">
Click here for user role
</span>
</div>
</div>
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I'm using angular 1, and trying to set a variable when a form is submitted using ng-click or ng-submit. That variable then cascades and removes the form from the DOM using an ng-if. However, I run into the chrome error message "Form submission canceled because the form is not connected", and the form is not posted.
Here's a complete MWE:
<html>
<head>
<title>Something</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-if="status.value=='ok'">
<form action="url" method="post" target="_blank">
<button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
</form>
</div>
<div>{{status}}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
$scope.status = {'value':'ok'};
}]);
</script>
</body>
</html>
Whenever I completely remove the ng-* attributes, the form submits normally, but then the variable isn't updated.
Any suggestions on how to keep the form around just long enough to post it?
The problem in your code here is the ng-if statement. When you click the button, the status.value is updated immediately, causing a $digest cycle. The $digest cycle causes the ng-if to be false, which removes the entire div (including the form) from the DOM.
One possible fix would be to use ng-show instead of ng-if, which just hides the element, but does not remove it from the DOM.
Another possibility would be to attach the ng-click to a function which handles all the form submission logic, and perhaps even suppresses the default submission with event.preventDefault().
<html>
<head>
<title>Something</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-if="status.value=='ok'">
<form action="url" method="post" ng-submit="formSubmit()" target="_blank">
<button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
</form>
</div>
<div>{{status}}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
$scope.status = {'value':'ok'};
$scope.formSubmit=function(){
//here you can write you business logic here
};
}]);
</script>
</body>
</html>
or you can also write:
<form action="url" method="post" target="_blank">
<button type="submit" ng-click="postData()">Open in new window</button>
</form>
in your controller:
$scope.postData=function(){
//logic will be here:
}
I have just created a very simple app.
It only contains one function which is used in ng-click.
Somehow, ng-click is not firing.
Can anyone take a look for me?
Plunker:
http://plnkr.co/edit/DxwX5sJVaKABeC2JBF8M?p=preview
HTML
var app = angular.module('myApp');
app.controller('createController', ['$scope', function($scope){
$scope.submitProject = function(){
alert('wahaha');
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="form-group text-right">
<button class="btn btn-primary btn-lg" ng-click="submitProject()">Submit</button>
</div>
</body>
</html>
Add an ng-controller, so ng-click will know which controller is the function.
<div class="form-group text-right" ng-controller="createController as create">
<button class="btn btn-primary btn-lg" ng-click="create.submitProject()">Submit</button>
</div>
I recommend using controllerAs, try reading about this in this article.
you need to bind your controller by adding an ng-controller attribute like
<body ng-controller="createController">
to an element that encompasses the html that you would like to bind the scope of your createController to.
Adding the controller to an outer Div will solve your problem.
<div ng-controller='createController' class="form-group text-right">
Hope it helps.
It looks like the module 'myApp' is not correctly instantiated. It should be:
var app = angular.module('myApp', []);
This is because you need to pass in an array which is the list of modules myApp depends on. In this case, it is an empty array.
You will also need to add the controller to the view as suggested by previous answers.
I am using two module in one page and second module is not working. If i removed first module then second one is working fine. I dont know why is this happening , because we can use the two or many module in one page.
<html>
<head>
<title>Angular JS</title>
<script src="angular.min.js"></script>
</head>
<body>
<p>------------ New Controller ------------</p>
<div ng-app="newApp" ng-controller="validateform" >
{{name}}
<form name="newForm">
Enter Name: <input type="text" id="firstName" name="firstName"
ng-model="firstName" ng-maxlength="20"> </br>
<button ng-click="show()" >Submit</button>
</form>
</div>
<script>
//Creating AngularJS controller here
var newApp = angular.module('newApp',[]);
newApp.controller('validateform',function($scope){
$scope.name="newApp";
$scope.show = function() {
if($scope.firstName == undefined || $scope.firstName == '')
alert('Name is Required');
else
alert('Hi - ' + $scope.firstName);
};
}
);
</script>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="myController">
{{name}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('myController',function($scope){
$scope.name="rishi";
});
</script>
</body>
</html>
You can only have one ng-app per page. If you want another module, then you can inject it into the first module:
var newApp = angular.module('newApp',['mainApp']);
This will give you access to that module's controllers etc...
And on the page, you could define that controller as the controller for a specific
<div ng-controller="myController">
...
</div>
The question is, why not just include the controller from the second module in the first module and have them all together?
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
but ng-click doesn't work. Why?
Here is my code:
scripts.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function ($scope) {
$scope.mylist = 1;
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<input type="number" ng-model="mylist" />{{mylist}}
<br/>
<div ng-switch on="mylist">
<div ng-switch-when=1>
<ng-include src="'first.html'"></ng-include>
</div>
<div ng-switch-when=2>
<ng-include src="'second.html'"></ng-include>
</div>
</div>
</body>
</html>
first.html
<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>
second.html
<p>second</p>
<button ng-click="mylist=1">switch to 1</button>
Also here is the Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview