Push data in to JSON on ng-blur using angularjs - javascript

I have one text box. When I type something in that text box and click anywhere then the content in the text box want to push in JSON.
Here is my text box code
<input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" />
Here is my JSON
$scope.existingTemp = [{"name": "template1"},{"name": "template2"},{"name": "template3"},{"name": "template4"},{"name": "template5"}];
Please share your ideas. Thanks in advance.

You can use ngBlur directive for that.
View:
<input type="text" ng-model="addTemplate" ng-blur="addValueToJson(addTemplate)"/>
Controller:
$scope.addValueToJson = function(value){
var newObj = {name: value};
$scope.existingTemp.push(newObj);
};
This is working JSFiddle for you.
Hope it helps.

<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data=[];
$scope.fill=function(){
$scope.data.push("name:"+$scope.addTemplate);
console.log(JSON.parse(JSON.stringify($scope.data)));
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" ng-blur="fill()"/>
</body>
</html>
Plunker: http://plnkr.co/edit/rR0Sl0ZE7xTrZmIonVAI?p=preview

Related

store value from checkbox into string if checked

I want to store value from checkbox into string
<label style="color:black; text-decoration:none; font-size:15px" href="#">
<input type="checkbox" ng-model="diet.v1" ng-true-value="'&diet=high-fiber'" ng-false-value="''" />High-Fiber</label>
How do i get value from ng-true-value (when it's checked) to string so i can use it ?
when i try something like this console.log(diet.v1); in js it wont work
Please check the following working sample code with ng-true-value, ng-false-value.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.diet = {
v1 : ''
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Value:
<input type="checkbox" ng-model="diet.v1"
ng-true-value="'&diet=high-fiber'" ng-false-value="''">
</label><br/>
<tt>value = {{diet.v1}}</tt><br/>
</form>
</body>
</html>

Angular JS form validation in "myApp" application.

I am new to AngularJS and try to implement form validation in "myApp" app.
I wrote the code below. The {{result}} should output "true"/"false". But it didn't work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name = "myForm">
<p>Input the field: </p>
<input type = "text" name="myInput" ng-model = "myInput" required>
</form>
<p> The result:</p>
<p>{{result}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = myForm.myInput.$valid;
});
</script>
</body>
This must be correct code for your problem.
If you "watch" the changes in the "input field" then $valid result will generate.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<form name='myForm' novalidate>
<p>Input the field: </p>
<input type='text' ng-model='model.name' name='myInput' required/>
</form>
<p> The result:</p>
<p>{{myForm.myInput.$valid}}</p>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',['$scope',function($scope) {
$scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
if(newValue) {
//do anything with new value
}
});
}]);
</script>
</body>
</html>
Hope this will be helpful to you.
As a new User to angularJS your approcach is some how correct in form validation.In future you will learn new vesions in angular and several validation methodologies.
following code line is the way that how we can check valid input in angularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Your approach is correct.Keep it up and it will be great if you can define correct question clearly. :)
Cheers.

input type number- not able to Remove decimal point

I have this following html code. I donot want the decimal point to be there in this input field.
can someone let me know how to achieve this.
<input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ng-model="params.data" />
Please, keep in mind that ngPattern is just used to validate the field in a form (formName.field.$error.pattern), it still allows you to type a decimal point or whatever even if your regex doesn't match.
You can do it using:
ngChange directive;
ngMask module (Always I need handle inputs with masks I use it).
I made this snippet showing both ways:
(function() {
"use strict";
angular
.module('app', ['ngMask'])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.params = {};
$scope.checkNumber = function() {
if ($scope.params.data) {
$scope.params.data = $scope.params.data.replace(/\D+/, '');
}
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="form" novalidate>
<label for="withoutMask">Input without mask: </label>
<input type="text" id="withoutMask" ng-model="params.data" ng-change="checkNumber()">
<hr>
<label for="mask">Input with mask: </label>
<input type="text" id="mask" mask="d" repeat="15" restrict="reject" limit="false" ng-model="otherInput">
</form>
</body>
</html>
I hope it helps!

Angular Js Issue with data-ng-disabled

I am having an angular Js program like below.
HTML
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
JS
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
The text area is getting disabled only when I select the radio button with value mine.I am expecting it to be disabled when the page loads only, cause I mentioned the value as mine in the controller. But its always enabled, Please help me with the issue
It works for me, please check below sample and check your angular version as well
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example88-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="Mydirective">
<script>
var app = angular.module("Mydirective",[]);
app.controller("MyController",function($scope){
$scope.test = "mine";
});
</script>
<div ng-controller="MyController">
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="mine"/> Mine
<input data-ng-model="test" type="radio" name="rdButton" id="userLbl" value="Other"/> Other
<textarea data-ng-disabled="test==='mine'" data-ng-model="htmlSpace" type="text"></textarea>
</div>
</body>
</html>
http://plnkr.co/edit/gBN41mrNfDXbEDLZchCp?p=preview

How to update angularjs model (with ng-model-options parameter) on button press?

I have some inputs (text, checkboxes, selects).
I want to update controller model only after button press.
<input type="email" ng-model="vm.email" ng-model-options="{updateOn:'not blur, maybe custom event'} }"/>
<button ng-click="vm.apply()">Apply</button>
vm.apply = function() {
//How to fire event to trigger model update?
}
Ok, i guess i find solution. We can use a submit event.
So only when user will press submit button, model will update values.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example79-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" ng-model-options="{ updateOn: 'submit' }" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<pre>text={{text}}</pre>
</form>
</body>
</html>

Categories