I want to hide the value by default and show the value when I click on button for 1st time. When you click on the same button for a 2nd time, it should hide the value instead of displaying. Vice versa it should happen.
Here is my html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js">
</script>
<script th:src="#{/main.js}"></script>
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<div ng-show = "IsVisible"> yes </div>
</body>
</html>
here is my JS File:
var app = angular.module("EmployeeManagement", []);
app.controller("EmployeeController", function($scope, $http) {
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
can anyone tell me how to achieve this scenario?
You should use negation of $scope.IsVisible on button click. So that if it is visible then it will hide and if it is hide then visible:
Try this:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js">
</script>
<script >
var app = angular.module("EmployeeManagement", []);
app.controller("EmployeeController", function($scope, $http) {
$scope.ShowHide = function(){
$scope.IsVisible = !$scope.IsVisible;
}
})
</script>
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<div ng-show = "IsVisible"> yes </div>
</body>
</html>
Instead of a showHide function, the better name would be toggle(). Inside this function instead of setting the $scope.IsVisible = true, you can toggle the value of that variable like !$scope.IsVisible.
#karthick, you can also do it on template end without any interaction of the controller.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AngularJS</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js">
</script>
<script >
var app = angular.module("EmployeeManagement", []);
app.controller("EmployeeController", function($scope, $http) {
})
</script>
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController" ng-init="IsVisible=false">
<input type="button" value="Show Angular" ng-click="IsVisible = !IsVisible"/>
<div ng-show = "IsVisible"> yes </div>
</body>
</html>
Related
i want to set the checkbox true or false dynamically , but while passing the data from controller to ng-model the checkbox status is not changing.
code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model={{applicable_status}}>
<label>Applicable</label>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.applicable_status = "true";
});
</script>
</body>
</html>
use ng-init directive to initialize application data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<input type="checkbox" ng-model=applicable_status>
<label>Applicable</label>
<pre ng-bind="applicable_status | json"></pre>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.init = function(){
$scope.applicable_status = true;
};
});
</script>
</body>
</html>
There is no need to use ng-init in your code.
You just need to remove those double quotes from "true" just assign normal true value to your variable, and it will work perfectly
Change your code from:
$scope.applicable_status = "true";
To
$scope.applicable_status = true;
It will work fine!
Check this JsBin
This does not seems duplicate of
AngularJS access scope from outside js function, as I don't want this variable access on any click!
I have AngularJS code in my Maincontroller.js is
<div ng-controller = "Maincontroller">
$scope.name = "Hello";
</div>
In My main.HTML file, I have JavaScript code where I want this $scope.name value:
<html>
<script>
// But this seems not possible with {{ name}}
</script>
</html>
Is there any possibilities to access this $scope variable in JavaScript code?
Can you please check below code. What I did is I posted the name on the UI and with the help of id I fetched the value from the javascript code with the help of getElementById and innerHTML.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body >
<div ng-app="app" ng-controller="Maincontroller">
Angualr Scope: <h1 id="name">{{name}}</h1>
</div>
<div>
A button to call a function from simple javascript function: <button onclick="getData()">Get Data: </button>
</div>
<script src="../lib/angular.js"></script>
<script>
var getData = function(){
var name = document.getElementById('name');
console.log(name.innerHTML);
}
</script>
<script>
var app = angular.module('app', []);
app.controller('Maincontroller', function ($scope) {
$scope.name = "Hello";
});
</script>
</body>
</html>
I've a bootstrap alert that appears after some operation is completed,but I want it to close after two or more seconds,how can I achieve this effect?I'm using Angular.js and I've only found solutions in jQuery.
Thanks.
Angular bootstrap provides an option for alert directive dismiss-on-timeout. It accepts timeout in milliseconds. This attribute requires the presence of the close attribute.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function($scope) {
$scope.show = true;
$scope.closeAlert = function(index) {
$scope.show = false;
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<uib-alert type="danger" close="closeAlert()" ng-if="show" dismiss-on-timeout="4000">Oh snap! Change a few things up and try submitting again.</uib-alert>
</div>
</body>
</html>
I am having troubles with using ng-click. I have added ng-click directive to the button. It does not trigger the function associated with ng-click. In Angular Batarang tool, it says the functions are undefined.
I tried the problem in Plunker.It does work. And also If i hard code the file path it works.
index.html code
<!DOCTYPE html>
<HTML ng-app="myEventApp">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 ng-controller="HelloWorldController">{{ helloMessage }}</h1>
<div ng-controller="EventDetail">
</div>
<div ng-include="" src="fileName"></div>
<!--<ng-include src="fileName"></ng-include>-->
<!--<div ng-include="" src="'template/testing10000.html'"></div>-->
<button ng-click=incrementCounter()>Next</button>
<button ng-click=decrementCounter()>Back</button>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="js/app.js"> </script>
</body>
</HTML>
app.js code
var app = angular.module("myEventApp", []);
app.controller('HelloWorldController', ['$scope', function($scope){
$scope.helloMessage = "Book Viewer";
}]);
app.controller('EventDetail', ['$scope', function($scope){
$scope.counter = 0;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
$scope.incrementCounter = function(){
$scope.counter++;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
$scope.decrementCounter = function(){
$scope.counter--;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
}]);
You declared the functions inside the EventDetail controller, but you have the buttons outside of the controller container in the html.
<div ng-controller="EventDetail">
<div ng-include="" src="fileName"></div>
<button ng-click="incrementCounter()">Next</button>
<button ng-click="decrementCounter()">Back</button>
</div>
Here is a simple code, where I tried to implement what I'm talking about:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example32-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="AppController">
<form name='AlertForm' ng-init="action = 'AlertForm.$valid && print(text)'">
Input: <input type="text" ng-model="text" ng-keyup='$event.keyCode == 13 && {{action}}' /><br />
<input type="button" ng-click="{{ action }}" value="Alert" />
</form>
</div>
<script>
angular.module('app', [])
.controller('AppController', ['$scope', function($scope) {
$scope.print = function(msg) {
alert(msg);
};
}]);
</script>
</body>
</html>
http://plnkr.co/edit/M7hfHytCzqrOMMLSpbZm?p=preview
There is a form with a single input and a button. If you press the button or press enter, while staying in the input, it will alert you with content of the input.
I've tried to use ng-init and Angular templating for caching the print(text) expression, to avoid redundancy, but it doesn't work.
Is there any other ways, to do that without touching controller?