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>
Related
How to save data from the form by clicking on the button?
I do not understand where the error is.
As planned, when you click on the data from the field stored in the variable "master"
For example I use this tutorial: http://www.w3schools.com/angular/angular_forms.asp
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="firstName"><br>
<button ng-click="copyData()">Click Me!</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {uder.firstName};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData=function(){
$scope.master1=angular.copy($scope.mas);
$scope.copyData();
}
});
</script>
</body>
</html>
First of all you have a typo error. Replace {uder.firstname} with {user.firstname}.
You should put some effort on understanding scopes and how you can use variables, that you declare on scopes.
You declare an input with ng-model="firstname", but on the controller you have a user object with the attribute firstname. You should change your form to:
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">RESET</button>
<button ng-click="copyData()">Click Me!</button>
and in your controller
app.controller('formCtrl', function($scope) {
$scope.user = { firstname:"", lastname:"" }; //init your user
$scope.master = user.firstname; //or user object itself, dont understand what exactly you would like to achieve
$scope.reset = function() {
$scope.user = $scope.master;
};
$scope.copyData=function(){ }//call your onclick event
//set the data, that you want directly here. Recursion will not work.
More information about scope and forms can definitely help you.
Firstly,There are some typos like $scope.mas and {uder.firstname}.
Inspite of that you are assigning a property to the $scope object using ng-model directive but in the controller you are trying to access it using an object called user which would be undefined at this point.Here is the change in your code
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">
RESET</button>
<button ng-click="copyData()">
Click Me!</button>
</form>
<p>
form = {{user}}</p>
<p>
master = {{master}}</p>
The controller would be like
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData = function () {
$scope.master = user.firstName;
$scope.master1=angular.copy($scope.master);
$scope.copyData();
};
Thanks to all!
A working version:
(function(angular) {
'use strict';
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
})(window.angular);
-<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="weather 2.js"></script>
</head>
<body ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
</body>
</html>
I started looking into angular and cannot seem to figure out why my data is not passed to my directive. I have code here: https://plnkr.co/edit/ONwYevQ4NbvBVjTwARHl?p=preview
My Code:
app.js:
var app = angular.module('mjApp', []);
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
$scope.name = "m.jacionis";
$scope.avatar = null;
$scope.fetchData = function(){
var callUrl = 'https://api.github.com/search/users?q=' + $scope.name;
$scope.avatar = "http://images.clipartpanda.com/sad-face-clipart-black-and-white-9c4eqRyyi.png";
$http({
method: 'GET',
url: callUrl
}).then(function successCallback(response) {
$scope.avatar = response.data.items.length > 0 ?
response.data.items[0].avatar_url : $scope.avatar;
console.log($scope.avatar);
}, function errorCallback(response) {
console.log('avatar stays the same');
});
};
}]);
app.directive("mjDirective", function(){
return {
restrict: "EA",
templateUrl: 'template.html',
scope: {
name: "=name",
avatar: "=avatar"
}
};
});
index.html:
<!DOCTYPE html>
<html ng-app="mjApp">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="parent" ng-controller="MainController">
<div class="line">
<input type='text' ng-model='name' />
<input type="button" ng-click="fetchData()" value="Submit User Name" />
</div>
<mj-directive name=name userAvatar=userAvatar></mj-directive>
</div>
</body>
</html>
template.html:
<div class='line'>
<p>Name : <strong>{{name}}</strong></p>
<img class="avatar" src={{avatar}}/>
</div>
name value is passed, but avatar value which I get when I fetch data isn't. I cannot seem to figure out, why it is like that. Any ideas or suggestions would help a lot.
I think you have taken wrong name userAvatar instead of avatar since you binded avatar
your bindings,
scope: {
name: "=name",
avatar: "=avatar"
}
So, you have to take name and avatar in directive.
<body>
<div class="parent" ng-controller="MainController">
<div class="line">
<input type='text' ng-model='name' />
<input type="button" ng-click="fetchData()" value="Submit User Name" />
</div>
<mj-directive name=name avatar=avatar></mj-directive>
</div>
</body>
change directive,
<mj-directive name=name avatar=avatar></mj-directive>
I think you need to wrap the name and avatar in strings when you use them in HTML.
<mj-directive name="name" userAvatar="userAvatar"></mj-directive>
Also inside the directive you should have:
scope: {
user: "=name"
avatar: "=userAvatar"
}
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>
I'm trying to prevent user from resubmitting the login form with the code below
<button class="submit" ng-disabled="form_login.$submitted" type="submit"></button>
But this will disable the submit button as long as the button is clicked, even when user submit invalid data. What is the right way to stop submit button only after valid information submitted?
You can use ng-required attribute(directive) which will check the dirty state of the element.
Try this:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!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 data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form action="#" method="post" name="myForm">
Name::
<input type="text" ng-model="name" ng-required='true'>
<input type="submit" ng-disabled="myForm.$invalid" value="Submit">
</form>
</body>
</html>
Live example
Though your question is not clear, But you can try this ,
Here is HTML :
<form action="#" method="post">
Name::<input type="text" ng-model="name" ng-keyup="dirty()">
Address::<input type="text" ng-model="address" ng-keyup="dirty()">
<input type="submit" ng-disabled="error" value="Submit">
</form>
and here is JS :
angular.module('myApp', []).controller('ctrl', function($scope){
$scope.error = true; //Disables button initially
$scope.dirty = function(){
if($scope.name!='' && $scope.address!='')//Check conditions here
{
$scope.error = false; //Enables the button
}
}
});
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?