angular.module('app',[]).controller('NgListController',function($scope){
$scope.items = [
{name:'Coke', price: 5, sum: 2, sumMoney: 10},
{name:'Bread', price: 3, sum: 2, sumMoney: 6}
];
$scope.priceChange = function(newVal, oldVal){
//TODO
};
});
.sum{
width:25px;
}
.sumMoney{
width:40px;
background-color:#EEE;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<fieldset ng-controller="NgListController">
<div ng-repeat="item in items">
<p>
<lable>{{item.name}},</lable>
<lable>$ {{item.price}} x </lable>
<input type="text" class="sum" ng-model="item.sum" ng-change="priceChange(item.price)">
=
<input type="text" class="sumMoney" ng-model="item.sumMoney" ng-readonly="true">
</p>
</div>
<span>Totol money : {{totalMoney}}</span>
</fieldset>
</body>
</html>
I'm trying to use ng-repeat and ng-change in an angular-js app. check the snippet above. How can I get every item's sum money when its sum change and get the total money of all items?
Use This Line :- input type="text" class="sum" ng-model="item.sum" ng-change="priceChange()"
$scope.items = [
{name: 'Coke', price: 5, sum: 2, sumMoney: 10},
{name: 'Bread', price: 3, sum: 2, sumMoney: 6}
];
$scope.totalMoney = 0;
$scope.priceChange = function () {
var total = 0;
for (var i = 0; i < $scope.items.length; i++) {
total = total + ($scope.items[i].price * $scope.items[i].sum);
}
$scope.totalMoney = total;
};
$scope.priceChange();
it works:
angular.module('app', []).controller('NgListController', function($scope) {
$scope.items = [{
name: 'Coke',
price: 5,
sum: 2,
sumMoney: 10
}, {
name: 'Bread',
price: 3,
sum: 2,
sumMoney: 6
}];
$scope.oldObj = {};
$scope.$watch('items', function(newValue, oldValue) {
for (var k in newValue) {
if (newValue.hasOwnProperty(k)) {
if (newValue[k].sum != oldValue[k].sum) {
$scope.oldObj = newValue[k];
break;
}
}
}
$scope.calPrice();
}, true);
$scope.totalMoney = 0;
$scope.calPrice = function(html_code) {
$scope.totalMoney = 0;
$scope.items.forEach(function(value) {
value.sumMoney = (value.price * value.sum);
$scope.totalMoney += value.sumMoney;
});
}
});
.sum {
width: 25px;
}
.sumMoney {
width: 40px;
background-color: #EEE;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<fieldset ng-controller="NgListController">
<div ng-repeat="(itemKey,item) in items">
<p>
<lable>{{item.name}},</lable>
<lable>$ {{item.price}} x</lable>
<input type="text" class="sum" ng-model="item.sum">=
<input type="text" ng-model="item.sumMoney" class="sumMoney" ng-readonly="true">
</p>
</div>
<span>Totol money : {{totalMoney}}</span>
<br>
<br>
<br>
<br>
<span>Changed Value : {{oldObj}}</span>
</fieldset>
</body>
</html>
Related
I have a check box with a button.
When I click button checked, checkbox value should be pushed into an array. But it adds at the beginning of an array. I want to add checked checkbox value at the end of the array when clicking the button.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.save = function(){
$scope.albumNameArray = [];
angular.forEach($scope.albums, function(album){
console.log(album.selected);
if(album.selected)
{
$scope.albumNameArray.push(album.name);
}
});
}
})
</script>
I have the perfect solution for your query. You just need to make a small change on the logic. Since you want to track the sequence on which the checkboxes are selected, i would suggest you the proper way in AngularJS, using ng-change on the checkbox.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
<ul>
<li ng-repeat="album in albums">
<input type="checkbox" ng-model="album.selected" value={{album.name}} ng-change='trackOrder(album)' /> {{album.name}}
</li>
</ul>
<button type='button' ng-click="save()">Save</button><br>
<div ui-sortable="sortableOptionsList[0]" >
{{albumNameArray}}
</div>
<div ui-sortable="sortableOptionsList[0]">
<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
</div>
</body>
</html>
<script>
angular.module('test', ['ui.sortable'])
.controller('Test', function($scope){
$scope.albumArray = [];
$scope.albums = [{
id: 1,
name: 'test1',
checked : false
},
{
id: 2,
name: 'test2',
checked : false
},
{
id: 3,
name: 'test3',
checked : false
}];
function createOptions (listName) {
console.log('outout');
var _listName = listName;
var options = {
placeholder: "app",
connectWith: ".apps-container",
helper: function(e, item) {
console.log("list " + _listName + ": helper");
return item;
}
};
return options;
}
$scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
$scope.trackOrder = function(album){
//add album in the array
if(album.selected){
$scope.albumArray.push(album.name);
}else{
//remove album fron the array
var index = $scope.albumArray.indexOf(album.name);
$scope.albumArray.splice(index,1);
}
}
$scope.save = function(){
//if you want the value on albumNameArray on click on save use this else you can
//use the $scope.albumArray directly
$scope.albumNameArray = angular.copy($scope.albumArray);
}
})
</script>
Here is the plunkr link PLUNKR
use unshift.
$scope.albumNameArray.unshift(album.name);
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="example.js"></script>
<script src="checklist-model.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role.text}}
</label>
<button ng-click="user.roles=[];" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
angular.module('plunker', ['checklist-model']);
var DemoCtrl = function($scope) {
$scope.roles = [{
id: 1,
text: 'guest'
}, {
id: 2,
text: 'user'
}, {
id: 3,
text: 'customer'
}, {
id: 4,
text: 'admin'
}];
$scope.user = {
roles: [$scope.roles[1]]
};
$scope.checkAll = function() {
// this first method doesn't work
//$scope.user.roles = $scope.roles;
// this one work
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
};
$scope.checkNth = function(i) {
console.log("first", JSON.stringify($scope.user.roles));
$scope.user.roles.splice(i, $scope.user.roles.length);
console.log("second", JSON.stringify($scope.user.roles));
$scope.user.roles.push($scope.roles[i])
console.log("third", JSON.stringify($scope.user.roles));
}
};
</script>
</body>
</html>
Here the checklist-model not woking as i expected.
im new to angular js help me.
is there any need to add CDN?.
Here is a plunk with the solution, I just made the work as a toggle for now. You can change that yourself if you want it to behave otherwise.
http://plnkr.co/edit/tm29BSwUoiFKUgytvnHE?p=preview
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="plunker" ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" ng-model="role.checked" ng-change="toggleUserRole(role)"> {{role.text}}
</label>
<button ng-click="uncheckAll();" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkNth(0)">Check first</button>
<button ng-click="checkAll()">Check all</button>
<pre>{{ user.roles | json }}</pre>
</div>
<script>
var app = angular.module('plunker',[]);
app.controller('DemoCtrl', function($scope) {
$scope.roles = [{
id: 1,
text: 'guest',
checked: false
}, {
id: 2,
text: 'user',
checked: false
}, {
id: 3,
text: 'customer',
checked: false
}, {
id: 4,
text: 'admin',
checked: false
}];
$scope.user = {
roles: []
};
$scope.toggleUserRole = function(role){
if($scope.user.roles.indexOf(role) == -1){
$scope.user.roles.push(role);
}
else{
$scope.user.roles.splice($scope.user.roles.indexOf(role),1);
}
};
$scope.checkAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.checkNth(i);
if($scope.user.roles.indexOf($scope.roles[i]) == -1){
$scope.user.roles.push($scope.roles[i]);
}
};
$scope.checkNth = function(i) {
$scope.roles[i].checked = !$scope.roles[i].checked;
$scope.toggleUserRole($scope.roles[i]);
}
$scope.uncheckAll = function() {
for (i = 0; i < $scope.roles.length; i++)
$scope.roles[i].checked = false;
$scope.user.roles = [];
};
});
</script>
</body>
</html>
I have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,
$scope.items = [
{id: 0, title: "apple",selected:true},
{id: 1, title: "orange",selected:true},
{id: 2, title: "grapes",selected:true},
];
On ng-click in each check box i have called a function test("apple").
$scope.test = function(vals) {
$scope.vl=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].title == vals) {
console.log("dnt push");
}
else {
$scope.vl.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vl array");
console.log($scope.vl);
}
Problem I am facing is it works fine for 1st uncheck but not when i do for multiple uncheck. When i check unchecked its not loading div.
In HTML I am using like,
<div ng-repeat="item in vl"> some tags </div>
not quite sure about your question, but hope my answer can give you some hints.
plunker demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [{
id: 0,
title: "apple",
selected: true
}, {
id: 1,
title: "orange",
selected: true
}, {
id: 2,
title: "grapes",
selected: true
}];
});
<!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">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{item.title}}
</div>
{{items | json}}
</body>
</html>
If and only if you want to put in an array the item who are checked :
http://plnkr.co/edit/DvoPBBvKf3AhYM4qcBhx?p=preview
html
<div ng-repeat="item in items">
<input type="checkbox"
ng-model="item.selected" ng-click="test(item.title)"> {{item.title}}
</div>
controller
$scope.test = function(vals) {
$scope.vl=[];
$scope.vlChecked=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].selected) {
$scope.vlChecked.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vlChecked array");
console.log(JSON.stringify($scope.vlChecked));
}
Here i have created a record using ng-grid but wat i need is when i select the selectAll checkbox the selected records should appear in the same page .when i unselect any checkbox in a record the tick mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail plz help me wit this
-----here is my index.html-------
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<span ng-model="person.check" ng-click="changeCheckAll()">
<div class="gridStyle" ng-grid="gridOptions" ></div>
</span>
<span ng-repeat="person in people | filter: {check:true}">
<div class="gridStyle" ng-grid="gridOptions1" ></div>
</span>
</body>
</html>
And here is my script...
-------script.js-------
// Code goes here
// script.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.people = [{
name: "Moroni",
age: 50,
}, {
name: "Tiancum",
age: 43,
}, {
name: "Jacob",
age: 27,
}, {
name: "Nephi",
age: 29,
}, {
name: "Enos",
age: 34,
}];
$scope.gridOptions = {
data: 'people',
columnDefs: [{field: 'check',
displayName: 'Check',
cellTemplate: '<input type="checkbox">'
}, {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.gridOptions1 = {
data: 'people',
columnDefs: [ {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
here is my plnkr:http://plnkr.co/edit/ubatnOV83gz1sF3zaVTf?p=preview
Use showSelectionCheckbox to set grid options. Here is the link
http://angular-ui.github.io/ui-grid/
How can we display a selected column in angular.js and copy it to clipboard?
Currently I am trying to display user selected column. Also need to know how each row item of a column could be copied in this scenario:
debugger;
var app = angular.module('myApp', ['ngGrid']);
app.controller('GridExampleCtrl', function($scope, $http, $timeout) {
debugger;
$scope.myData = [];
$scope.grid1 = [{
name: "grid1a",
age: 50
}, {
name: "grid1b",
age: 43
}, {
name: "grid1c",
age: 50
}, {
name: "grid1d",
age: 29
}, {
name: "grid1e",
age: 34
}];
$scope.grid2 = [{
lastname: "grid2a",
age: 50,
state: 'Idaho'
}, {
lastname: "grid2b",
age: 43,
state: 'NewYork'
}, {
lastname: "grid2c",
age: 50,
state: 'California'
}, {
lastname: "grid2d",
age: 29,
state: 'Arizona'
}, {
lastname: "grid2e",
age: 34,
state: 'Utah'
}];
$scope.gridSels = [{
GridSelId: 1,
GridSelName: 'Grid 1'
}, {
GridSelId: 2,
GridSelName: 'Grid 2'
}]
debugger;
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true,
showGroupPanel: true
//pagingOptions: $scope.pagingOptions
};
$scope.selectedCls = function(index) {
if ($scope.sortColumn === $scope.columnHeaders[index].Value) {
return $scope.sortColumn;
}
};
debugger;
$scope.display = function() {
debugger;
console.log("User selected grid : " + $scope.gridSelectedId);
if ($scope.gridSelectedId == 1) {
$scope.myData = $scope.grid1;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
} else {
$scope.myData = $scope.grid2;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
}
};
});
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
.green {
background-color: green;
color: white;
}
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>test</title>
<link href="Content/ng-grid.css" rel="stylesheet" />
<link href="Content/Style.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Gridata_refqam.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ng-grid.js"></script>
</head>
<body ng-controller="GridExampleCtrl">
<div>
Grid Selection:
<select ng-model="gridSelectedId">
<option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
</select>
<br />User selected: {{gridSelectedId}}
<br>
<hr>
<br />Cols: {{$scope.selectedCls}}
<br>
<hr>
<br />Cols2: {{$scope.sortColumn}}
<br>
<hr>
<div>
<button ng-click="display()">Display</button>
<hr>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
Please find my mock UI i did to get the solution , hope this helps to resolve the issue
http://plnkr.co/edit/BEz6YSkXuT4WwZQWUh5P
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Bala", age: 25},
{name: "Vinoth", age: 45},
{name: "Kumar", age: 51},
{name: "Santhosh", age: 38},
{name: "Praveen", age: 21}];
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" >'+
'<div ng-click="copyColumn($event,col)" ng-class="\colt\ + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'</div>';
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate },
{ field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', headerCellTemplate: myHeaderCellTemplate} ]
};
$scope.copyColumn = function(evt,col) {
var clipBoard = '';
for(var i=0;i< $scope.myData.length; i++){
if(col.index === 0){
clipBoard = clipBoard +' '+ $scope.myData[i].name;
}
else{
clipBoard = clipBoard +' '+ $scope.myData[i].age;
}
}
alert(clipBoard);
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
.green {
background-color: green;
color: white;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>