$scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"}
It should be in table
How can we solve with using ng-repeat or how this possible in easy way angularjs
Date Amt
2018-10-10 16
2018-11-11 20
2018-12-12 15
You will need to transform your object into an array first in your controller and then can simply use ng-repeat on that. Try following.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"};
$scope.updatedValue = [];
for (var i = 1; i <= (Object.keys($scope.value).length-1)/2; i++) {
if($scope.value["future_date"+i] !== '0000-00-00')
$scope.updatedValue.push({
"date" : $scope.value["future_date"+i],
"amt" : $scope.value["fut_amt"+i]
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<table>
<tr><td>Date</td><td>Amt</td></tr>
<tr ng-repeat="val in updatedValue"><td>{{val.date}}</td><td>{{val.amt}}</td></tr>
</table>
</div>
</div>
You can use the following to iterate through your object and display Date and Amt values.
JS:
$scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"}
$scope.length = Math.floor(Object.keys($scope.value).length / 2);
$scope.getLength = function(){
return new Array($scope.length);
}
$scope.getValueByIndex = function(index){
var key = Object.keys($scope.value)[index];
value = $scope.value[key];
return value;
}
html:
<table>
<tr>
<td>
Date
</td>
<td>
Amt
</td>
</tr>
<tr ng-repeat="item in getLength() track by $index" ng-if="getValueByIndex($index + 1 + length) > 0">
<td>
{{getValueByIndex($index + 1)}}
</td>
<td>
{{getValueByIndex($index + 1 + length)}}
</td>
</tr>
</table>
Demo
Related
I am new in AngularJS. I have created pagination in AngularJS.
I have check and unchecked all functionality. When I click on check all it should be consider only current page rows checkbox. But now it select all
pages rows which I do not want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="myController">
<input type="text" class="form-control" placeholder="Filter..." ng-model="query">
<table>
<tr>
<th>
<input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
</th>
<th class="col-sm-2">First Name</th>
<th class="col-sm-2">Last Name</th>
<th class="col-sm-4">Email Id</th>
</tr>
<tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
<td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
<td class="col-sm-2 text-center">{{item.itemName}}</td>
<td class="col-sm-2 text-center">{{item.itemcity}}</td>
<td class="col-sm-4 text-center">{{item.quantity}}</td>
</tr>
</table>
<uib-pagination max-size="maxSize" boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
ng-change="pageChanged()" previous-text="‹" next-text="›" items-per-page=10></uib-pagination>
</body>
<script>
// Code goes here
var myModule = angular.module('myModule', ["ui.bootstrap"]);
myModule.controller('myController', function($scope) {
$scope.page = 1;
$scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
{itemName: "Tim", itemcity: "dhule", quantity : "21"},
{itemName: "Tum", itemcity: "chalis", quantity : "33"},
{itemName: "Tam", itemcity: "akola", quantity : "54"},
{itemName: "Tem", itemcity: "jamner", quantity : "67"},
{itemName: "Tiem", itemcity: "nashik", quantity : "87"},
{itemName: "Pum", itemcity: "mumbai", quantity : "98"},
{itemName: "Pum", itemcity: "mumbai", quantity : "82"},
{itemName: "Pum", itemcity: "mumbai", quantity : "79"},
{itemName: "Pum", itemcity: "mumbai", quantity : "100"},
{itemName: "Pum", itemcity: "mumbai", quantity : "51"}
];
$scope.displayItems = $scope.totalItems.slice(0, 10);
$scope.pageChanged = function() {
var startPos = ($scope.page - 1) * 10;
//$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
console.log($scope.page);
};
$scope.search = function (row) {
return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
};
var getAllSelected = function () {
var selectedItems = $scope.totalItems.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.totalItems.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.totalItems, function (item) {
item.Selected = value;
});
}
$scope.allSelected = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
});
</script>
</html>
Below is snippset,
I want to set the value of balance column based on the entered Amt in Entered Amt column.
I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d)"></td>
</tr>
</table>
</body>
</html>
You can have the balance in your x object.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d, x)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
x.balance = x.Amt - d;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
</tr>
</table>
</body>
</html>
Here is updated code
HTML
<div ng-app>
<h2>Todo</h2>
<div>
<table ng-controller="TodoCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="(key,x) in records">
<td>{{x.Amt}}</td>
<td><input type="text" readonly ng-model="balance[$index]"></td>
<td><input type="text" ng-model="d" ng-change="value(x,d,$index)"></td>
</tr>
</table>
</div>
</div>
JS
function myCtrl($scope) {
$scope.balance = {};
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(obj,val,key)
{
$scope.balance[key] = parseInt(obj.Amt) - parseInt(val);
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
}
What I need to do is show button in table, but when "name" is "True" the button should not show. Only when "name" is "False: the button should be in the table.
My Json
[
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}]
My table
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post">POST</button></td>
</tr>
You could use ng-if to show and hide button
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td>
<button ng-if="name.name === 'False'">POST</button>
</td>
</tr>
you can use ng-if or ng-show or ng-hide
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td>
<button ng-if="!name.name">POST</button>
</td>
Go througth this link https://stackoverflow.com/a/21870119/6554634 to get better idea about ng-if, ng-show and ng-hide.
And there is mistake in your data, there is no opening brace for first object. This is silly but causes loss if we didn't notice.
[
{
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}
]
I prefer ng-if as it removes element from DOM if not necessary.
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post" ng-if="name.name==='False'">POST</button></td>
</tr>
Your JSON is invalid
Use ng-show to show the button when name is True.
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.names = [{
"name" : "False",
"date" : "22/02/2015"
},
{
"name" : "False",
"date" : "18/03/2013"
},
{
"name" : "True",
"date" : "12/06/2012"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td><button ng-model="post" ng-show="name.name == 'True'">POST</button></td>
</tr>
</table>
</div>
In my html
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
<a href="#" >Show or Hide Button</a>
In my controller
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names =[
{
"Name" : "Max Joe",
"City" : "Lulea",
"Country" : "Sweden"
},
{
"Name" : "Manish",
"City" : "Delhi",
"Country" : "India"
}
];
});
I need to show the button if there are no records or 1 of the country is India. I'm working on this but no avail http://jsfiddle.net/junedc/n8ejgtwa/1/ Thanks for the help guys really appreciated.
Use an array filter as well as array length to set a boolean
var hasIndia = $scope.names.filter(function(item){
return item.Country === 'India'
}).length;
$scope.showButton = !$scope.names.length || hasIndia;
In view:
<a ng-show="showButton" href="#" >Show or Hide Button</a>
i need some help to make nested ng-repeat.
I have the following code which which is not nested.Currently it prints all subject first and than it prints all student names.
However, I need to print students for each subject.
How i can convert it in nested ng-repeat?
<tr>
<td>Student</td>
<td width="100px" ng-repeat="subject in subjects" colspan="3">{{subject.Name}}
</td>
</tr>
<tr>
<th width="296"></th>
<th class="rotate-45" ng-repeat="student in studentNames">
<div>
<span>{{student}}</span>
</div>
</th>
</tr>
Here is example for nested ng-repeat. this might be helpful to you.happy coding
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
</li>
</ul>
</div>
</div>
</body>
<script>
var WeeklyApp = angular.module('WeeklyApp', []);
WeeklyApp.controller('WeeklyController', ['$scope', function ($scope) {
$scope.myData = [{
"number" : "2013-W45",
"days" : [{
"dow" : "1",
"templateDay" : "Monday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}, {
"name" : "work 9-5",
}
]
}, {
"dow" : "2",
"templateDay" : "Tuesday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}
]
}
]
}
];
}]);
</script>