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>
Related
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
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 trying to pass two regex variable regex1 and regex2 for email and mobile number into single ng-pattern by using "OR" condition but it is not working. if i pass a single variable at a time then it works perfectly. So what i have to do to pass two variable at a time into single ng-pattern directive.
please suggest solution..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
});
</script>
</body>
</html>
What you can do is create a function in which you can taken both regex and based on these regex return true and false and from ng-pattern call that function
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style> </head> <body> <div ng-controller="myCtrl"> <form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form> </div> <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script> <script>
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; });
$scope.runBothRegex = (function(){
return {
var value = $scope.user.udetail;
if(regex1.test(value) || regex2.test(value)){
return true;
}
return false;
}
})();
</script> </body> </html>
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>
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