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?
Related
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>
I only need to show the span if the user input value is greater than 1 and the input field doesn't contains the values defined in the regular expression.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-form-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="formExample">
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = '';
$scope.regex = "#%<;'=";
}]);
</script>
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" ng-pattern="regex && userType">
<span ng-show="userType && myForm.input.$valid">show me!</span>
<br>
</form>
</body>
</html>
Plunker Demo
If you need a entry without your regex pattern, you need a exclusion mask:
$scope.regex = "[^#%<;'=]*";
And use a not conditional mask on pattern:
<input name="input" ng-model="userType" ng-pattern="regex">
plunker here
ng-pattern only validates regular expression. So inside ng-pattern there should be just pattern. At the time of showing message check the userType and the other form property inside ng-show or ng-hide. That's all.
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" ng-pattern="regex">
<span ng-show="userType && !myForm.input.$error.pattern">show me!</span>
<br>
I have a custom directive with an input box. This input is used in many of the pages. I want to require this input field in some of the forms and exclude in others. What should be the best approach to do this?
I am submitting the form from controllers so not sure how this would work in angular?
I am new to angular and not sure how this all will be tie up together.
So essentially this is what I want :
<form name="myForm" >
<div ng-contoller="Somecontroller as vm" >
<custom-directive>
this will create an input box like this :
<input type="text"> </input>
</custom-directive>
</div>
</form>
When I submit the form I want to ensure that if the text box inside the directive does not have text then I should get an error.
Hi, this is your custom directive, with this example you can handle what you want...also you can use directive in all you form but remember do not use with same ngModel, and last one thing always set ngModel in this directive.
var app = angular.module("app", []);
app.directive("requiredInput", function () {
return {
restrict: "E",
required: "^ngModel",
template: "<input type='text' ng-model='ngModel' ng-required='true'>",
scope: {
ngModel: "="
}
}
})
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>form 1</h1>
<form name="form">
<required-input ng-model="form.myInput"></required-input>
<required-input ng-model="form.myInput2"></required-input>
{{myInput}}
<button ng-disabled="form.$invalid">submit</button>
</form>
<h1>form 2</h1>
<form name="form2">
<required-input ng-model="form2.myInput"></required-input>
{{myInput2}}
<button ng-disabled="form2.$invalid">submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<w-test-directive></w-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("wTestDirective", function() {
return {
template : "<input type='text'/>"
};
});
</script>
</body>
</html>
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
Im basic developer , just wanted to pass hidden values from my html page in a json array . Following is my code :-
Index.html
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" novalidate>
<b> Text: </b>
<input ng-model="form.text" required /><br>
<button ng-click="submitForm()" bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp');
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
Now , the value from ng-model="form.text" successfully returns the result as for unhidden input types
{ "text":"What_ever_text" }
but how to send a defined value in array, consisting of hidden input type like :-
<input value="99999" type="hidden" ng-model="form.userid" required />
So , wanted desired output like :-
{ "text":"What_ever_text" , "userid":"99999" }
any solution ?
Note :- The input type should be hidden or any other easier method appreciated. Thanks in advance.
hidden input fields also works same as normal fields only.
see the below code
var app = angular.module('myApp', []);
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {
text: "some test",
userid: '12312312312'
};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" ng-submit="submitForm()" novalidate>Text:
<input ng-model="form.text" required />
<br/>
<input type="hidden" ng-model="form.userid" required />
<button bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</div>