I am trying to add maxlength validation to my form fields, but when I add it in, it says that any length is invalid and always sets my $scope variables to 'undefined'.
Check it out here: http://jsfiddle.net/stevenr4/41L26apv/
Javascript:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.data = {
'person1': {
'firstname': "Steve",
'lastname': "Rogers",
'maxlength': 5
},
'person2': {
'firstname': "Bob",
'lastname': "Ross",
'maxlength': 10
}
};
$scope.pkeys = ['person1', 'person2'];
$scope.log = function() {
console.log($scope.data);
}
}
HTML:
<div ng-controller="MyCtrl">
Hello, {{name}}!<br>
Sir, {{data.person1.firstname}} {{data.person1.lastname}}!<br>
and, {{data.person2.firstname}} {{data.person2.lastname}}!<br>
<div ng-repeat="key in pkeys track by $index">
{{key}}<br>
<input type="text" ng-model="data[key].firstname" ng-maxlength="data[key].maxlength"><br>
<input type="text" ng-model="data[key].lastname" ng-maxlength="data[key].maxlength"><br>
</div>
<button ng-click="log()">
Log the data
</button>
</div>
Can someone help me fix this or at least explain this to me?
Try this => ng-maxlength="{{..}}"
<div ng-controller="MyCtrl">
Hello, {{name}}!<br>
Sir, {{data.person1.firstname}} {{data.person1.lastname}}!<br>
and, {{data.person2.firstname}} {{data.person2.lastname}}!<br>
<div ng-repeat="key in pkeys track by $index">
{{key}}<br>
<input type="text" ng-model="data[key].firstname" ng-maxlength="{{data[key].maxlength}}"><br>
<input type="text" ng-model="data[key].lastname" ng-maxlength="{{data[key].maxlength}}"><br>
</div>
<button ng-click="log()">
Log the data
</button>
</div>
Related
html file:
<select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress">
<option value=''>--Select Address --</option>
</select>
<form name="shippingForm" class="form-horizontal" role="form">
<div class="form-group">
<p class="control-p col-sm-2" for="Address">Address Line1</p>
<div class="col-sm-10">
<input type="text" name="Address" placeholder="Address Line1"
ng-model="shipping.addressLine1" class="input-width" ng-init ="shipping.addressLine1"/>
</div>
</div>
<div class="form-group">
<p class="control-p col-sm-2" for="Address2">Address Line2:</p>
<div class="col-sm-10">
<input type="text" name="AddressLine" placeholder="Address Line2" ng-model="shipping.addressLine2" class="input-width" />
</div>
</div>
</form>
js file:
if (data){
console.log(data);
$scope.addressToShip = data;
var ShipAddress=[];
storeLocally.set('ship Info', data);
if(data.addressLine2 == null){
$scope.shipAddress = data.map(function(address) {
return {
shipping: address.addressLine1
};
});
}
else{
$scope.shipAddress = data.map(function(address) {
return {
shipping: address.addressLine1 +', '+ address.addressLine2
};
});
}
}
},
function (data) {
//if (data.status == 500) {
// $scope.addressError = "Oops! No Address Found!";
};
data:
{0 :"123 waller st,suite#220"},
{1 :"323 waller st,suite#230"}
The problem is the form I am using intially to save data. Once data is saved to db it is coming in dropdown. After choosing one value from dropdown it should come to text fields.
I have tried so far ng-model by using same variable names,even though form's ng-model and dropdown's ng-model have same variable i.e. shipping.. But it didn't work. Please help me out what I am missing in here.
If I understand your goal and you data's schema, you need to change the ng-model of the input[name="Address"] to shipping.addressLine1.shipping.
I get this idea according the data's structure that came from the .map:
return {
shipping: address.addressLine1
};
You can see the structure when you pick a option from the select - the model will displayd and you can see that the structure is (for example):
{
"addressLine1": {
"shipping": "123 waller st"
}
}
If you have a question about this, let me know.
I tried to simulate the situation without the server, hopefully I simulate it right.
Now, to the code:
angular.module('myApp', []).
controller('ctrl', function($scope) {
var data = [{
addressLine1:"123 waller st", addressLine2:"suite#220"
}];
if (data) {
console.log(data);
$scope.addressToShip = data;
var ShipAddress = [];
//storeLocally.set('ship Info', data);
if (data.addressLine2 == null) {
$scope.shipAddress = data.map(function(address) {
return {
shipping: address.addressLine1
};
});
}
else {
$scope.shipAddress = data.map(function(address) {
return {
shipping: address.addressLine1 +', '+ address.addressLine2
};
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="shipping.addressLine1" ng-options="shipping.shipping for shipping in shipAddress">
<option value=''>--Select Address --</option>
</select>
<br />
<pre>
{{shipping | json}}<br />
{{shipping.addressLine1 | json}}
</pre>
<form name="shippingForm" class="form-horizontal" role="form">
<div class="form-group">
<p class="control-p col-sm-2" for="Address">Address Line1</p>
<div class="col-sm-10">
<input type="text" name="Address" placeholder="Address Line1"
ng-model="shipping.addressLine1.shipping" class="input-width" ng-init ="shipping.addressLine1"/>
</div>
</div>
<div class="form-group">
<p class="control-p col-sm-2" for="Address2">Address Line2:</p>
<div class="col-sm-10">
<input type="text" name="AddressLine" placeholder="Address Line2" ng-model="shipping.addressLine2" class="input-width" />
</div>
</div>
</form>
</div>
Did you try using AngularJS' ng-change attribute in the drop down?
Try like this:
<select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress" ng-change="someFunction(shipping.shipping)">
<option value=''>--Select Address--</option>
</select>
In your controller add the following function:
$scope.someFunction = function(shipping) {
$scope.shipping.addressLine1 = // Assign value from the shipping variable here
$scope.shipping.addressLine2 = // Assign value from the shipping variable here
}
Hope this helps!
Here is a working jsFiddle https://jsfiddle.net/ashishU/umn8or3g/1/
I have a loop ng-repeat
<div ng-repeat="data in datas">
Name: {{data.name}} <input type="text" ng-model="age">
</div>
I want $scope.age become to $scope.age_data.name. Eg: $scope.age_Tan, $scope.age_Jim...
So i have tried ng-model="age_{{data.name}}" but it make error.
How to solve this?
The "right" way to do this is to, in the controller, do this:
$scope.ages = {};
Then in the template:
Name: {{data.name}} <input type="text" ng-model="ages[data.name]">
Should work...
What you show here won't work exactly here's a couple of options
angular.module('myApp', [])
.controller('MyCtrl', function() {
var vm = this;
vm.datas = [{
name: 'thing1'
}, {
name: 'thing2'
}, {
name: 'thing3'
}];
})
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl as myCtrl">
Option 1
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="data.age" />
</div>
<br/>
<br/>Option 2
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="myCtrl.age[data.name]" />
</div>
<pre>{{myCtrl|json}}</pre>
</body>
</html>
I am not sure why you want to keep age of a person in another object/container. Here is the solution which may help you rethink you design.
$scope.people= [
{name: 'Tan', age: 20},
{name: 'Jim', age: 21}
];
<div ng-repeat="person in people">
Name: {{person.name}} <input type="text" ng-model="person.age">
</div>
Hello Everyone I have face a problem to create a object with ng-repeat. when i declare the Object then the same value in filled in the text box which has same ng-model value. if i am not Declare the object then duplicacy is not occures.
If i am declare the $scope.user = {}; in js file then problem is occures. please check this. Give me a solution ASAP.
My Fiddle Link Please Check This http://jsfiddle.net/Ladjkp5s/1/
Here is my Html file
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item + 1}}
<div>
Name: <input type="text" ng-model="user.name"><br>
Address: <input type="text" ng-model="user.add"><br>
Phone: <input type="text" ng-model="user.phn"><br>
ZipCode: <input type="text" ng-model="user.zip">
</div>
</li>
</ul>
</div>
</div>
Here is my JS File
var app = angular.module('myApp', []);
app.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
app.controller('MainController', function($scope) {
$scope.items = [];
$scope.user ={};
for (var i = 0; i < 5; i++) $scope.items.push(i);
});
Thanks.
The problem is that you are using same ng-model for every item.(user.fieldName) you have to use item.fieldName.
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item.index + 1}}
<div>
Name: <input type="text" ng-model="item.name"><br>
Address: <input type="text" ng-model="item.add"><br>
Phone: <input type="text" ng-model="item.phn"><br>
ZipCode: <input type="text" ng-model="item.zip">
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/3akwk7tv/
Yuu can not loop in controller function, but u can create controller that loops in html like in this example
<ul>
<li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ul>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>
Using Javascript with angularJs, I kind the following code :
JS
$scope.myObj = {
'sthg': '',
'a': [{
'b' : ''
}]
}
HTML
<p ng-repeat="radio in fiche.radios">
<input type="text" ng-model="radio.code" placeholder="Numéro de cliché" ng-required="true" />
<span >
<button type="button"ng-click="removeRadioList($index);" ng-disabled="fiche.radios.length === 1">
<i>X</i>
</button>
</span>
</p>
http://plnkr.co/edit/LOgk7Nudse0srS7Bs1G6?p=preview
In my App $scope.myObj.a[0].b is undefined with the ng-repeat (if I remove ng-repeat, it will be defined).
In the plunkr it is defined even after the run of ng-repeat, but I managed to have the behaviour when I enter something in the input and then delete it.
I don't get what's hapening, I would like to understand why and if it is a good way to do ?
Beacause you set ng-required="true" on your input tag angular wouldn't bind empty value to your model thous when you delete value from input your console shows you radios.code as undefined.
Please see below for working demo:
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $log) {
$scope.ficheInit = {
'user_id': '',
'radios': [{
'code': ''
}]
};
$log.log($scope.ficheInit);
$scope.fiche = angular.copy($scope.ficheInit);
$log.log($scope.fiche);
$scope.addRadioList = function() {
$scope.fiche.radios.push({
'code': ''
});
}
$scope.removeRadioList = function(i) {
$scope.fiche.radios.splice(i, 1);
}
$scope.disableAddRadio = function() {
console.log($scope.fiche.radios);
return !(angular.isDefined($scope.fiche.radios[$scope.fiche.radios.length - 1].code) || $scope.fiche.radios.length < 1);
}
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl">
<button ng-click="showForm=true;">SHOW</button>
<div ng-show="showForm">
<button ng-click="addRadioList();" ng-disabled="disableAddRadio()">Ajouter un cliché</button>
<p ng-repeat="radio in fiche.radios">
<input type="text" ng-model="radio.code" placeholder="Numéro de cliché" />
<span>
<button type="button" ng-click="removeRadioList($index);" ng-disabled="fiche.radios.length === 1">
<i>X</i>
</button>
</span>
</p>
</div>
{{fiche.radios}}
</div>
</div>
Is there a native way to do something like this in Angular? I know of ng-repeat, but not sure how to implement it in this instance.
Basically, it would duplicate Id Number with an increased number e.g, 1001, 1002, etc and be able to create a new Name.
So:
Id Number: 1000
Bob
Id Number: 1001
Sue
Id Number: 1002
Rumplestiltskin
Form Data:
<body ng-controller="MainCtrl">
Enter Name:
<input type="text" ng-model="name">
<br />
<div id="data">
Id Number: {{num}}
<br />Name: {{name}}
</div>
<form ng-submit=incNum()>
<input class="btn btn-primary" type="submit" value="New User">
</form>
</body>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.num = 1000;
$scope.incNum = function ()
{
$scope.num ++;
$scope.data.clone();
}
});
Plunker Demo
Totally. This is where Angular shines. Just add an object into an array and let ng-repeat do the work. Try this out.
HTML
Enter Name: <input type ="text" ng-model="name"> <br />
<div id="data">
Id Number: {{num}}<br />
Name: {{name}}
</div>
<form ng-submit=addUser()>
<input class="btn btn-primary" type="submit" value="New User">
</form>
<div ng-repeat="user in users">{{user.name}}: {{user.id}}</div>
Javascript
$scope.num = 1000;
$scope.users = [];
$scope.addUser = function () {
$scope.num++;
$scope.users.push({
name: $scope.name,
id: $scope.num
});
}