I want to make a button and when I click on it launch a html page. How can I do it?
Here is the incomplete example:
<button ng-model="status" ng-init="status=true" ng-click="status=!status">
<span ng-show="status == true" >Activo</span>
<span ng-show="status == false">Desactivo</span>
</button>
Thanks for all.
You can use an simple 'a' tag to solve that:
Lunch somepage.html
You can solve this using angularjs too, here is an example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-model="status" ng-init="status=true" ng-click="myFunc()">
<span ng-show="status == true" >Activo</span>
<span ng-show="status == false">Desactivo</span>
</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $window) {
$scope.myFunc = function(){
$scope.status = !$scope.status;
$window.location.href = '/somepage.html'; //this will redirect you to somepage.html
}
});
</script>
</body>
</html>
Related
I am trying to make the button non-functional after the number of clicks are equal to the value entered in the text boy.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Student <input type="input" ng-model="number"> <br>
<p> {{number}} </p>
<button ng-click= "myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count=0;
$scope.number;
$scope.myFunction = function() {
$scope.count++;
$scope.count <= $scope.number;
}
});
</script>
</body>
</html>
If you're looking for a Angular 2+ implementation, you could use two-way binding to ngModel directive. Try the following
Controller
export class AppComponent {
buttonCount = 0;
studentCount = 0;
onClick() {
this.buttonCount++;
}
}
Controller
Student <input [(ngModel)]="studentCount" (keyup)="buttonCount = 0" type="input"> <br>
Number input: {{ studentCount }}
<br><br>
<button [disabled]="buttonCount >= studentCount" (mouseup)="onClick()">Click me</button>
<br>
Button clicks: {{ buttonCount }}
The (keyup)="buttonCount = 0" event in the input tag resets the button click count everytime a value is entered in the input.
Working example: Stackblitz
If you're new to Angular, I'd recommend you to go through this tutorial. It introduces some of the basics.
I would do something like this:
Add a ng-disabled attribute to the button, this will disable the button when the expression is truthy.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Student <input type="input" ng-model="number"> <br>
<p> {{number}} </p>
<button ng-disabled="count >= number" ng-click= "myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count=0;
$scope.number;
$scope.myFunction = function() {
$scope.count++;
$scope.count <= $scope.number;
}
});
</script>
</body>
</html>
If you are starting out and can switch, I would recommend trying Angular 2+ instead of AngularJS. It's much more intuitive IMO.
You can use ng-disabled directive. You can disable the button after the number of clicks.
Here is my aspx:
<body ng-controller="myController">
<form id="form1" runat="server">
<div>
<input type="button" value="Press" ng-click="incrementCount()" ng-init="count=0"/>
<span>{{ count }}</span>
</div>
</form>
</body>
and following is JS:
angular.module('myModule', [])
.controller('myController', function ($scope, $http) {
$scope.incrementCount = function () {
$scope.count = $scope.count + 2;
};
});
Whats wrong with my Code??
When I click the 'Press' button, it does not works as it should.
angular.module('myModule', []) .controller('myController', function ($scope, $http) {
$scope.incrementCount = function () {
$scope.count = $scope.count + 2;
};
});
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myModule" ng-controller="myController">
<form id="form1" runat="server">
<div>
<input type="button" value="Press" ng-click="incrementCount()" ng-init="count=0"/>
<span>{{ count }}</span>
</div>
</form>
</body>
</html>
Its working normally ! Click RUN.
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>
I did coding for create,save,update,delete successfully. How to use localstorage for this? edit popup is not working.
Below is my code,
<html>
<head>
<title>KANNA</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Save" ng-click="Save()" />
<input type="button" value="Get" ng-click="Get()" />
<input type ="button" value="Edit"ng-click="Edit()"/>
</div>
<script >
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', ['$scope','$localStorage','$sessionStorage','$window',function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.templateUrl ="prakash.html";
$sessionStorage.SessionMessage = "SessionStorage: hai.";
}
$scope.edit=function(){
'prakash.html';
}
$scope.Get = function () {
$window.alert($localStorage.templateUrl+ "\n" + $sessionStorage.SessionMessage);
}
}]);
</script>
</body>
</html>
Any help would be appreciated.
What do you do exactly ?
I don't understand your problem ?
If you want to use a pop-up you could see here in modal section
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)