Button in table angular - angularjs

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>

Related

ng-reapeat row data to column angularjs

$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

Adding boolean flag to Angular ng-repeat

I need to add an active class to first item that slipped through ng-if="!item.hidden" loop. It works fine at first as $first directive means 0 index. But Let say the 0 to 3rd indexes is hidden therefore wont be displayed, and 4th index is the first to be displayed.
Here's my actual code
<div ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item" ng-class="{'active': $first }">
$first directive doesn't work when the index I am applying active class is not 0.
In place of ng-if condition you can filter the items.
after that $first return index 0 by default
<div ng-repeat="item in items| filter:{hidden:false}">
<div class="title item" ng-class="{'active': $first }">
{{item.value}}
</div>
Please check working plnkr https://plnkr.co/edit/mFVhkf55bvv8Z70F9ufk?p=preview
It was a good question, the problem as you mentioned, it cannot be done by $index as $index will even get counted if it the element is hidden.
But, angular is more and more powerful and it has many more alternatives.
Here is a solution from them,
In this answer I used filter to directly filter the values from the array so that, only the filtered objects will be displayed.
ng-repeat="x in records | filter: (x.hidden == true)"
what the above lines make is, it will not take into consideration, the values where hidden is true.
so, the $index will not start from '0'
Here is the working example:
<!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 ng-class="{'active': $index == 0 }" ng-repeat="x in records | filter: (x.hidden == true)">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"hidden": true
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"hidden": false
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"hidden": false
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"hidden": false
}
]
});
</script>
</body>
<style>
.active
{
background: green;
}
<style>
</html>
Here is a working DEMO

Angular hide or show a button if the content of the field in table contains a specific text

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>

how to use nested ng-repeat

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>

How to bind Mixed Json to Table in angularjs

{ "_id" : 1, "name" : { "first" : "John", "last" : "Backus" }, "contribs" : [ "Fortran", "ALGOL", "Backus-Naur Form", "FP" ], "awards" : [ { "award" : "W.W. McDowell Award", "year" : 1967, "by" : "IEEE Computer Society" }, { "award" : "Draper Prize", "year" : 1993, "by" : "National Academy of Engineering" } ] }
I have take your JSON format and binded it in to table using ng-repeat.
ng repaet sample in html file:
<body ng-controller="Ctrl">
<tbody ng-repeat="dat in alldata">
<tr>
<td colspan="3">{{dat.name.first}} {{dat.name.last}}</td>
</tr>
<tr><td colspan="3" align="center"><span style="font-weight:bold">Contribution</span></td></tr>
<tr ng-repeat="cont in dat.contribs">
<td colspan="3">{{ cont}}</td>
</tr>
<tr><td colspan="3" align="center"><span style="font-weight:bold">Awards</span></td></tr>
<tr ng-repeat="aw in dat.awards">
<td>{{ aw.award}}</td>
<td>{{ aw.year}}</td>
<td>{{ aw.by}}</td>
</tr>
</tbody>
Sample Script file:
var app = angular.module("app",[]);
app.controller('Ctrl', function($scope) {
$scope.alldata = [
{
"_id":1,
"name":{
"first":"John",
"last":"Backus"
},
"contribs":[
"Fortran",
"ALGOL",
"Backus-Naur Form",
"FP"
],
"awards":[
{
"award":"W.W. McDowell Award",
"year":1967,
"by":"IEEE Computer Society"
},
{
"award":"Draper Prize",
"year":1993,
"by":"National Academy of Engineering"
}
]
}
];
});
Please find the plnkr link for it: Plnkr

Resources