I have length and breath,based o that i am calculating area(l*b),suppose i have many field with different length and breath,area is calculating properly but i need sum of the area column,so how to add sum of all the above field in one new text box??? i need sum of all num3(area).
my code is below ......
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myapp" ng-controller="MainCtrl">
<form data-ng-repeat="choice in choices">
Length:<input type="number" ng-model="num1" />
width: <input type="number" ng-model="num2" />
Area: <input id="area" type="number" ng-model="num3" placeholder="Area" value="{{ num1 * num2 }}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<button ng-click="addNewChoice()">Add fields</button>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
</body>
</html>
I don't know an easy solution in your case.
You can't do it with value="{{ val + val2 }}" because it is only for displaying value not change model.
A possible solution :
<form data-ng-repeat="choice in choices">
Length:<input type="number" ng-model="choice.length" />
width: <input type="number" ng-model="choice.width" />
Area: <input id="area" type="number" placeholder="Area" value="{{ choice.length * choice.width }}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<button ng-click="addNewChoice()">Add fields</button>
Result : {{ sum() }}
In your controller :
$scope.choices = [{id: 'choice1', length:0, width: 0}, {id: 'choice2', length:0, width: 0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
$scope.sum = function() {
var sum = 0;
angular.forEach($scope.choices, function(choice) {
sum += choice.length * choice.width;
});
return sum;
}
<form data-ng-repeat="item in choices">
Length:
<input type="number" ng-model="item.num1" /> width:
<input type="number" ng-model="item.num2" /> Area:
<input id="area" type="number" ng-model="num3" placeholder="Area" value="{{item.num1 * item.num2}}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<span data-ng-bind="'Total Area:' + total()"></span>
</br>
<button ng-click="addNewChoice()">Add fields</button>
$scope.total = function() {
var total = 0;
angular.forEach($scope.choices, function(item) {
total += item.num1 * item.num2;
})
return total;
}
Related
I have a form with three input fields and function to add new row:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="username">
<input type="text" ng-model="house">
<input type="text" ng-model="points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
How is it possible to submit form as an array? I cant use username[]. Thank you
Need to user <input type="text" ng-model="person.username">
html:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="person.username">
<input type="text" ng-model="person.house">
<input type="text" ng-model="person.points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
I'm adding form elements dynamically using AngularJS as you can see below and it works very fine.
But sometimes, the user need to change the value of the placeholder and replace it with a value with his choice and I don't see if it's possible or not ?
Here is my HTML
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">Tr.</span>
<input id="tr-dpa" class="form-control" placeholder="Enter mobile number">
<button class="remove" ng-click="removeChoice()">-</button>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-1">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
</div>
</div>
</div>
And my script,
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
jsfiddle
You should have your choices array like this:
$scope.choices = [{
id: 'choice1',
placeholder: 'Enter Mobile Number'
}];
And, inside ng-repeat,
<input id="tr-dpa" class="form-control" placeholder="{{choice.placeholder}}">
Now, when you add new input, ask for a placeholder and push it along with id.
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id': 'choice' + newItemNo,
placeholder: $scope.placeholder
});
$scope.placeholder = "sample placeholder"
};
And, $scope.placeholder would be in HTML,
<input type="text" value="sample placeholder" ng-model="placeholder">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
working example
Form is empty, submit button dissabled, when user selected all input field submit button now dissable to enable that status change that time I need to call function to show progressbar.I tried bellow code.
html
----
<html>
<body>
{{message}}
</body>
</html>
You can check form validation on progress bar if form is valid then display progress bar
HTML Code
<style>
button.st{
padding:5px ;
border:1px solid #ccc;
/* background:green; */
/* border:1px solid lightblue; */
/* color:darkblue; */
margin:10px;
}
.progressbar{
border:1px solid #fff;padding:10px;border-radius:1px;width:60%;margin:10px;background:#999;color:red;
}
p{
margin-left:10px;
}
</style>
<body >
<div ng-controller="MyCtrl">
<p progressbar prog="form1.$valid ? '50':'10'" ></p>
<form name="form1" novalidate>
<p>
<span style="color:blue">1) select One</span><br/>
<input type="radio" ng-model="user.q1" name="grp1" value="A" ng-required="true"/>A
<input type="radio" ng-model="user.q1" name="grp1" value="B" ng-required="true"/>B
<input type="radio" ng-model="user.q1" name="grp1" value="C" ng-required="true"/>C
</p>
<p>
<span style="color:blue">2) select two</span><br/>
<input type="radio" ng-model="user.q2" name="grp2" value="A" ng-required="true"/>A
<input type="radio" ng-model="user.q2" name="grp2" value="B" ng-required="true"/>B
<input type="radio" ng-model="user.q2" name="grp2" value="C" ng-required="true"/>C
</p>
<button class="st" ng-disabled="form1.$invalid"> submit</button>
</p>
</form>
</div>
</body>
</html>
Controller js Code
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.name = 'World';
$scope.name = 'pelase select all fileds';
$scope.progressBar = false;
$scope.progressbarShow = function(){
$scope.progressBar = true;
}
});
app.directive('progressbar', [function() {
return {
restrict: 'A',
scope: {
'progress': '=prog'
},
template: '<div class="stripe" style="background-color: #C7D2D2; height:30px; width:100%;"> <div ng-style="style" style="background-color:#8CD211; height:100%"></div> </div>',
controller: function($scope, $element, $attrs) {
$scope.$watch(function() {
$scope.style = {"width": $scope.progress + "%"}
})
}
}
}])
please check working plnkr http://plnkr.co/edit/y35BnTUG36ChnCSC2YYH?p=preview
You can use $watch on $scope.user to watch change in radio buttons
$scope.$watch("user", function() {
if(!angular.isUndefined($scope.user.q1) && !angular.isUndefined($scope.user.q2))
$scope.increaseProgress = 50;
}, true);
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.user={};
$scope.increaseProgress = 10;
$scope.progressBarShow = function() {
alert("Coming");
$scope.increaseProgress = 50;
}
$scope.$watch("user", function() {
if(angular.isUndefined($scope.user.q1) && angular.isUndefined($scope.user.q2))
$scope.increaseProgress = 50;
}, true);
}])
.directive('progressbar', [function() {
return {
restrict: 'A',
scope: {
'progress': '=progressbar'
},
template: '<div class="stripe" style="background-color: #442; height:50px; width:100%;"> <div ng-style="style" style="background-color:#CD2; height:100%"></div> </div>',
controller: function($scope, $element, $attrs) {
$scope.$watch(function() {
$scope.style = {
"width": $scope.progress + "%"
}
})
}
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="app" ng-controller="main">
<div progressbar="increaseProgress" ng-show="form1.$valid"></div>
<form name="form1" novalidate>
<p>
<span style="color:blue">1) select One</span>
<br/>
<input type="radio" ng-model="user.q1" name="grp1" value="A" ng-required="true" />A
<input type="radio" ng-model="user.q1" name="grp1" value="B" ng-required="true" />B
<input type="radio" ng-model="user.q1" name="grp1" value="C" ng-required="true" />C
</p>
<p>
<span style="color:blue">2) select two</span>
<br/>
<input type="radio" ng-model="user.q2" name="grp2" value="A" ng-required="true" />A
<input type="radio" ng-model="user.q2" name="grp2" value="B" ng-required="true" />B
<input type="radio" ng-model="user.q2" name="grp2" value="C" ng-required="true" />C
</p>
<button class="st" ng-disabled="form1.$invalid"> submit</button>
</form>
</div>
I am new to Angularjs. I learned some basic concepts and I started developing a form. According to my requirements, I have to give 4 textboxes and if user wants wants more he adds another 4 textboxes. Meanwhile, I am unable to track the entered details.
// create angular app
var validationApp = angular.module('validationApp','');
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length>1){
var newItemNo = $scope.choices.length-1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
You have had an error in your initialisation of your app. The empty array in angular.module('validationApp', []). This array is the list of modules myApp depends on:
var validationApp = angular.module('validationApp',[]);
Further information in the docs.
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({id:'choice' + newItemNo});
};
$scope.showChoiceLabel = function(choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length > 1) {
var newItemNo = $scope.choices.length - 1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
I have the following controller:
function userControl($scope,$http) {
$scope.users = [
{"id":"0","name":"User1","roles":[{}]},
{"id":"1","name":"User2","roles":[{}]},
]
$scope.addUser = function() {
var nextid = $scope.getNextId();
$scope.users.push({id:nextid,name:$scope.userName});
$scope.userName = '';
//$apply();
};
$scope.getNextId = function() {
var count = 0;
angular.forEach($scope.users, function(data) {
count = data.id;
});
var count2 = parseInt(count)+1;
return count2;
};
}
And the following HTML:
<h2>Users</h2>
<div ng-controller="userControl">
<div ng-repeat="user in users">
{{user.id}} : {{user.name}}
</div>
<form ng-submit="addUser()">
<input type="text" ng-model="userName" placeholder="User Name" />
<input type="submit" value="add">
</form>
</div>
<h2>Add role to user</h2>
<div ng-controller="userControl">
<div ng-repeat="user in users">
<u>{{user.id}} : {{user.name}}</u><br />
<div ng-repeat="role in user.roles">
{{role.name}}
</div>
<br />
</div>
<form ng-submit="addRoleToUser()">
<select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
<input type="submit" value="add">
</form>
</div>
When I add a user in the addUser() function I can see the user is added since it's listed under the ng-repeat, however the user name does not appear in the select box.
This is because you use the same controller twice. This creates two separate scopes. When you add a user in one scope it doesn't get added in the second scope. The fix is simple, join the code in one scope:
<div ng-controller="userControl">
<h2>Users</h2>
<div>
<div ng-repeat="user in users">
{{user.id}} : {{user.name}}
</div>
<form ng-submit="addUser()">
<input type="text" ng-model="userName" placeholder="User Name" />
<input type="submit" value="add">
</form>
</div>
<h2>Add role to user</h2>
<div>
<div ng-repeat="user in users">
<u>{{user.id}} : {{user.name}}</u><br />
<div ng-repeat="role in user.roles">
{{role.name}}
</div>
<br />
</div>
<form ng-submit="addRoleToUser()">
<select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
<input type="submit" value="add">
</form>
</div>
</div>
An alternative approach is to create a Service since services are singletons:
module.factory('Users',function(){
var users = [
{"id":"0","name":"User1","roles":[{}]},
{"id":"1","name":"User2","roles":[{}]},
];
return {
users:users,
add:function(user){
users.push(user);
}
}
});
function userControl($scope, Users) {
$scope.users = Users.users;
$scope.addUser = function() {
var nextid = $scope.getNextId();
Users.add({id:nextid,name:$scope.userName});
$scope.userName = '';
};
$scope.getNextId = function() {
var count = 0;
angular.forEach($scope.users, function(data) {
count = data.id;
});
var count2 = parseInt(count)+1;
return count2;
};
}
This will work with your original markup.