I got this code from Vladyslav Babenko from this post over here (Clone elements in angularjs):
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
$scope.teste = function (pergunta) {
console.log("in");
}
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<form ng-submit="teste()">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">`enter code here`
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</form>
<button type="button" id="add" ng-click="add()">Add</button>
<button type="submit">teste</button>
</body>
</html>
It works fine, but when a add multiples forms, how can I get the values from each form?
Give every input a ng-model:
<input type="text" class="pure-input-1" id="input-2" ng-model="user.name" name="input-2">
Now you can adress the input value in your controller with:
$scope.user.name
Read more about this topic: https://docs.angularjs.org/guide/forms
Related
I am getting a form data from json.I have binded all data into a form fields, but Resource field data coming as separate object and I want to show it as comma separated.I tried this,But its showing two resouce fields. How to do it?
Here is my code
<form ng-repeat="data in editProjDetails">
<div>
<label class="displayBlock">Project Name</label>
<label><input type="text" ng-model="data.ProjectName" ng-disabled="all"></label>
</div>
<div>
<label class="displayBlock">Client</label>
<label><input type="text" ng-model="data.Client" ng-disabled="all"></label>
</div>
<div id="projectCoOrdBlock">
<label class="displayBlock">Project Co-ordinator</label>
<label><input type="text" ng-model="data.ProjectCoordinator" ng-disabled="true"></label>
</div>
<div id="resourceBlock">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-repeat="x in data.ResourceAllocated" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
</form>
I did this in jquery.This is what I am trying to implement in angular
rAllo = data.ResourceAllocated;
if (rAllo.length == 0) {
$("#resource").val("No resources available");
}
else {
for (var i = 0; i < rAllo.length; i++) {
var arrayDatas = rAllo[i].ResourceName;
resource.push(arrayDatas)
}
$("#resource").val(resource)
}
$scope.resourceAllocated= $scope.data.ResourceAllocated.map(function(el){return el.name}).join(",");
<input type="text" ng-model="resourceAllocated">
Try using this
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="resourceAllocated">
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.yearbtn = [
{year:'2022'},
{year:'2021'},
{year:'2019'},
{year:'2018'},
{year:'2017'},
{year:'2016'},
{year:'2015'},
];
$scope.resourceAllocated= $scope.yearbtn.map(function(el){return el.year}).join(",");
});
</script>
</html>
Working Demo
Try it like this,
<div id="resourceBlock" ng-repeat="x in data.ResourceAllocated">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data =[{"Id":1010,"ProjectName":"aaa","Client":"aaa","ProjectCoordinator":["RajkumarS"],"OnsiteCoordinator":"aaa","ResourceAllocated":[{"ResourceName":"RajkumarS","ResourceId":9,"RoleName":"Manager"},{"ResourceName":"aSd","ResourceId":1012,"RoleName":"tester"}],"ProjectRoles":null}];
$scope.resourceAllocated= $scope.data[0].ResourceAllocated.map(function(el){return el.ResourceName}).join(",");
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="myCtrl">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="resourceAllocated" ></label>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
I've an input text not required and I want to use a ng-pattern for only digits character, but when I submit the form, the input isn't valid. Why?
<input type="text" ng-model="price" format="currency" ng-pattern="/^[0-9]*$/">
in jsfiddle, insert product without enter a price and submit:
http://jsfiddle.net/2f6qscrp/266/
ps: I cannont change the type of input!
try with /^[0-9]+$/ + sign is for accepting one or more digits.
See if this helps.
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.price = '';
$scope.seeResults = function() {
console.log($scope.price);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="MainCtrl">
<form name="form" ng-submit="seeResults()" novalidate role="form">
Price <span ng-show="form.$submitted && form.price.$error.pattern" style="color: red;">should be an integer</span>
<input name="price" type="text" ng-model="price" format="currency" ng-pattern="/^[0-9]*$/">
<button type="submit" >Submit</button>
</form>
</body>
</html>
This is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.name = fname;
$scope.lastName = lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{name}}<br>
Last Name {{lastName}}
</div>
</body>
</html>
values are coming while typing into textbox but i want values only after clicking the button.Please help me.
I tried in both ways simple as well as by using service or factory method but no success
You must separate the ng-models of the input texts and destination field. They are updating real-time because of having the same models.
I have created the correct version for you:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.nameToSet = $scope.name;
$scope.lastNameToSet = $scope.lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
UPDATE: Here is another version with using a factory:
var myApp = angular.module('myApp', []);
myApp.factory('container', function() {
var model = {
name: '',
lastName: ''
};
return {
model: model,
setName: function(nameToSet) {
model.name = nameToSet;
},
setLastName: function(lastNameToSet) {
model.lastName = lastNameToSet;
}
};
});
myApp.controller('myController', function ($scope, container) {
$scope.$watch('name', function(newvalue,oldvalue) {
container.setName(newvalue);
});
$scope.$watch('lastName', function(newvalue,oldvalue) {
container.setLastName(newvalue);
});
$scope.onNameType = function(value) {
container.setName(value);
};
$scope.onLastNameType = function(value) {
container.setLastName(value);
};
$scope.getName = function () {
debugger;
$scope.nameToSet = container.model.name;
$scope.lastNameToSet = container.model.lastName;
};
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name" ng-change="onNameType(name)"/> <br>
<input type="text" ng-model="lastName" ng-change="onLastNameType(lastName)" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
I am new to angular JS. I have main form it has text box and one directive which has checkboxes. If user addded some text to textbox or modify inital status of checkboxes, when user click on ok button I have to check dirty flag and prompt user for unsaved changes. This is my plunk.
I have to use angular 1.3.16 version.
script.js:
// Code goes here
(function() {
"Use Strict";
angular.module('myapp', []);
angular.module('myapp').
controller('myappctrl', function($scope) {
$scope.user = {
list: [{
id: 1,
value: 'chkbox1',
selectedReturnType: false
}, {
id: 2,
value: 'chkbox2',
selectedReturnType: true
}, {
id: 3,
value: 'chkbox3',
selectedReturnType: false
}, {
id: 4,
value: 'chkbox4',
selectedReturnType: true
}, ]
};
$scope.ok = function() {
if ($scope.mainform.$dirty) {
alert('form modified');
}
};
});
angular.module('myapp').directive('checkboxdir', function() {
return {
templateUrl: "checkboxdir.html",
restrict: 'EA',
scope: {
user: '='
}
}
});
}());
Index.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myappctrl">
<form name="mainform" novalidate>
<checkboxdir user='user'></checkboxdir>
<input type="text" />
<input type="button" value="ok" ng-click="ok()"/>
</form>
</body>
</html>
Directive:
<div>
<form name='returntypeform' novalidate>
<div ng-repeat='item in user.list'>
<input type='checkbox' ng-checked="item.selectedReturnType" />
<label>{{item.value}}</label>
</div>
</form>
</div>
Need to pass checkbox check/uncheck from child directive to parent. Any idea why this is not working?
You have missed ng-model.
I have updated the plunker :
plunker
<body ng-controller="myappctrl">
<div ng-form="mainform">
<checkboxdir user='user'></checkboxdir>
<input type="text" data-ng-model="model" name="text"/>
<input type="button" value="ok" ng-click="ok()"/>
</div>
</body>
<div>
<form name='returntypeform' novalidate>
<div ng-repeat='item in user.list'>
<input type='checkbox'
name="$index"
data-ng-model="item.selectedReturnType"
ng-checked="item.selectedReturnType" />
<label>{{item.value}}</label>
</div>
</form>
</div>
I have input[type='date'] with no further validation rules.
Validation is not fired in the case when only part of a date is entered (say, the day and month). So when you have '01/02/YYYY' it's been taken for empty value and $error.date is not changed, so the validation message is missing.
If you first enter any valid date and then remove its part (say, the year) $error.date is updated and a validation message shows up.
Does anybody have any idea how to fire validation on a partly entered date?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
The bug was fixed in the next versions of Angular (upgraded from 1.4.3 to 1.8.2):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>