I am using ng-repeat to loop though elements which could be numeric or object. I am trying to use condition to display number or another sub ng-repeat. Following an example of code
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="angular.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
I am very new to angular. Please help.
Try like the below code, also please check this plunker for working example.
Controller:
$scope.isNumber = angular.isNumber;
Template:
<span ng-if="isNumber(value)">Valid Number</span>
Bind the angular.isNumber function to a function in your controller.
var app = angular.module("App", []);
app.controller("vmCtrl", function () {
var vm = this;
vm.isNumber = angular.isNumber;
vm.data = {
"thing1": [1,2,3,4],
"thing2": [{
"something1a": "something1b",
"something2a": "something2b"
},
{
"somethingElse1a": "somethingElse1b",
"somethingElse2a": "somethingElse2b"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table ng-app="App" ng-controller="vmCtrl as vm">
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="vm.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
</table>
Related
My smart table look like :
<table st-safe-src="input.inputBuckets" st-table="inputBuckets"
class="table">
<thead>
<tr>
<th>Timestamp</th>
<th ng-repeat="row in input.inputSeriesPrinted">{{row}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in inputBuckets track by $index">
<td>{{row.key | date:'yyyy-MM-dd HH:mm:ss'}}</td>
//current page is undefined
<td ng-repeat="item in input.inputData" >{{item[$parent.$index] + (currentPage-1)*10]}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10" class="text-center">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
So, because I have ng-repeat inside ng-repeat and use parent index, I need a current page for a new set of items. Without that (only item[$parent.$index]) displays same data for each page. currentPageis undefined. Any suggestion how can I get currentPage inside mine tbody?
EDIT: Codepen example. Here is my example of the problem with printed indexes of out ng-repeat and inner ng-repeat.
Your question is incomplete as you haven't showen us your controller side. So, from what I understood is the answer below.
CurrentPage is Undefined
You haven't defined it in your controller or your data value is undefined.
You can define the name of the index and use it, something like this.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.lines = [{
text: 'Page 1'
}, {
text: 'Page 2'
}];
$scope.someData = [{
text: 'Some Data 1'
}, {
text: 'some data 2'
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="(pageIndex, line) in lines">
<div class="preview">{{line.text}} Page Index : {{pageIndex}}</div>
<br/>
<div ng-repeat="(dataIndex, data) in someData">
{{someData[pageIndex]}}
Parent Index : {{pageIndex}}
childIndex : {{dataIndex}}
</div>
</div>
</div>
</body>
</html>
When i am using ng-if with a flag and list contains some values:
<tr ng-if="flag" ng-repeat="x in list1">
{{"print a"}}
<!-- do something -->
</tr>
<tr ng-if="!flag" ng-repeat="x in list2">
{{"print b"}}
<!-- do something -->
</tr>
It is printing both a and b irrespective of flag.It should only print a and b based on flag value?
Here you go..
var app = angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.flag = true;
$scope.list1 = [10,20,30,40,50];
$scope.list2 = [10,20,30,40,50];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
<tr ng-if="flag" ng-repeat="x in list1">
<td>
{{"print a"}}
</td>
</tr>
<tr ng-if="!flag" ng-repeat="x in list2">
<td>
{{"print b"}}
</td>
</tr>
</table>
So, it does work.
My question Related to this Question at ng-repeat values with 3 columns in table? - AngularJS
Then my Question is How to Get the Value of that button on click. ?
Here is My Problem
<input type='text' ng-model="mydata" />
<span ng-bind="$parent.$eval(mydata)"></span>
$scope.buttons =[ [0,1,2,3,4],
[5,6,7,8,9]
];
<tr ng-repeat="row in buttons">
<td ng-repeat= "button in row"><button class="btn btn-primary" ng-click ="$parent.mydata = $parent.mydata.toString() + button">
{{button}}</button></td>
</tr>
It Works on a single Array. But in multiple it doesn't
You can try something like this.
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="value in array">
<button ng-click=myFunction(value,$index)> MyButton</button>
</div>
</body>
app.controller('myCtrl', function ($scope) {
$scope.myFunction = function(val,index) {
console.log(val) };
});
//assuming this is your array
$scope.data = [
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"],
["opt1", "opt2", "opt3"]
];
// using ng-repeat to show all data
<table>
<tr ng-repeat="row in data">
<td ng-repeat="column in row" ng-click="somefunction('{{column}}')">{{column}}</td>
</tr>
</table>
THEN PASS IT TO THE CONTROLLER AND GET THE VALUE THERE..
I have a table with ng-repeat:
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
The table is populated with data-ng-init, when the user clicks on a button:
<button ng-click="getNewVals()">new values</button>
I get json with new key-value, my question is how to repopulate the table with the new values baes on the key? is there a angular way to do so?
ng-repeat is bound to the model you are iterating over. If you update the model, ng-repeat will re-draw. In your example, whenever $scope.data changes, the ng-repeat will update itself.
Use this way. It's good if you provide your JSON.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody>
<tr ng-repeat = "(key, val) in data">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
Look at the following example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in persons">{{x.name}}, {{x.age}}</li>
</ul>
<button ng-click="changeIt()">Change json</button>
<script>
//1 module declaration
var app = angular.module('myApp', []);
//2 controller declaration
app.controller('myCtrl',function($scope){
$scope.persons = [
{name:"Peter", "age": 23},
{name:"Lina","age":26},
{name:"Robert", "age":33}
];
$scope.changeIt = function(){
$scope.persons = [
{name:"Larry",age: 59},
{name:"Joseph", age: 63},
{name:"Clara", age:71}
];
}
});
</script>
</body>
</html>
Hope it solves your problem.
you writing ng-reapet instead of ng-repeat
try this.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
<button ng-click="data.push({'key':1,'value':2})">new values</button>
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);