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.
Related
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>
I have a html/angularjs table that contains the ff :
<tbody ng-repeat="x in Persons">
<tr>
<td>{{x.FirstName}}</td>
<td>{{x.LastName}}</td>
<td>{{x.Department}}</td>
<td>
<a href"#" data-ng-click="x.show = !x.show">
Sales Details
</a>
</td>
</tr>
<tr>
<td ng-show="x.show">
<!--user sales details here-->
</td>
</tr>
</tbody>
Currently, if I click on the first row it shows the details but I need to click it again to hide it. I want to hide the first row details if the 2nd row is clicked. How do I go about this?
Try this. i hope this what exactly what you want.
var app = angular.module("app", []);
app.controller("name", function($scope) {
$scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
$scope.showorhide = function(index){
var currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
<tr>
<td>First Name</td>
<td>
<a href"#/" style="color:red" ng-click="showorhide($index)">
open/close
</a>
</td>
</tr>
<tr ng-show="x.show">
<td >
{{x.FirstName}}
</td>
</tr>
</tbody>
</table>
</div>
you need a method for this
take a look
https://stackblitz.com/edit/js-tv6dog?file=index.js
js:
$scope.clicked = function(index){
let currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
html
<td>
<a href"#" data-ng-click="clicked($index)">
Sales Details
</a>
</td>
and of course add track by to ng-repeat
<tbody ng-repeat="x in Persons track by $index">
I have a scope array
$scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]
I need to show this data in my html page as below
|id|vehicle|
|--|-------|
|1 |car |
|2 |bike |
Is there any way I can achieve this.
Use ng-repeat like this,
<tr>
<th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArr">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
DEMO
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArr">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</body>
I have a list of images saved in var images, and a list of names saved in var searchName, now I need to display images along with name, but I could display it after all images displayed only.
HTML:
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
</tr>
<tr ng-repeat = "item in searchName">
<td>{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
How about merge this two into single Array and use ng-repeat.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.images = ['https://angularjs.org/img/AngularJS-large.png', 'http://build.acl.com/assets/tech-logos/angular-03fcc4cfc89d9b310265e7d1e01ee0aef405abf6c632f59342b18848e1c02587.svg'];
$scope.searchName = ["Angular-Logo", "Angular-SVG-Image"];
$scope.intrArr = mapImageAndName();
function mapImageAndName() {
var mappedArr = [];
for (var i = 0; i < $scope.images.length; i++) {
mappedArr.push({
'image': $scope.images[i],
'name': $scope.searchName[i]
});
}
return mappedArr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row col-sm-12" ng-app="app" ng-controller="controller">
<table class="displayImg col-sm-3">
<tr ng-repeat="obj in intrArr">
<td>
<img ng-src="{{obj.image}}" class="imageShow" />
</td>
<td>
{{obj.name}}
</td>
</tr>
</table>
</div>
You could use nested ng-repeat.
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td ng-repeat = "item in searchName">
{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
Look into AngularJS ng-repeat document.
There is a term called ng-repeat-start and ng-repeat-end
AngularJS ng-repeat Document
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td>{{searchName[$index][0].profileInfo.firstname}} </td>
</tr>
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>