I am trying to print a list which has 2 elements (binded dynamically)taken from 2 different arrays.
Following is my code:
scopehie.html
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="scopehie.js"></script>
<body ng-app="myApp">
<div ng-controller="parentCtrl">
Hello {{name}} !! </br></br>
</div>
<div ng-controller="childCtrl">
<ol>
<li ng-repeat-start="name in names", ng-repeat-end="dept in department">{{name}} from {{dept}}</li>
</ol>
</div>
</body>
</html>
scopehie.js
var app = angular.module('myApp' , []);
app.controller('parentCtrl', function($scope, $rootScope){
$scope.name = 'World';
$rootScope.department = 'Angular' ;
}) ;
app.controller('childCtrl' , function($scope){
$scope.names = ['A' , 'B' , 'C' , 'D'];
$scope.department = ['M' , 'N' , 'O'];
});
The problem is that my first parameter i.e "name in names" is looping but the second parameter i.e "dept in department" is not looping , infact it is not showing at all.
Output shown :
Hello World !!
1.A from
2.B from
3.C from
4.D from
Output required :
Hello World !!
1.A from M
2.B from N
3.C from O
4.D from P
Kindly suggest something.
try this simple $index way
<li ng-repeat="dept in department">{{names[$index]}} from {{dept}}</li>
You can do it by using ng-repeat only. not needed start and end .
Use something like this :
<ol>
<li ng-repeat="name in names">
{{name}} from {{department[$index]}}</li>
</ol>
The thing is you can use ng-repeat on just one veriable. While ng-repeat-start and -end is for repeating a block of html tags instead of just one tag. So...
If there is one to one mapping between names and department then you can do in this way.
<li ng-repeat="name in names">{{name}} from {{department[$index]}}</li>
working example here
<body ng-app="myApp">
<div ng-controller="parentCtrl">
Hello {{name}}
<br>
</div>
<div ng-controller="childCtrl">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department[$index]}}
<br>
</li>
</ol>
</div>
</body>
Related
I'm trying to make an ng-repeat for a JSON of 10 elements. I would like the ng-repeat to run and display from the 5 element. how can I do it?
<div ng-repeat="item in myarray>
{{item.name}}
</div>
$scope.myarray=
[
{"name":"joe"},
{"name":"ana"},
{"name":"buf"},
{"name":"yei"},
{"name":"jsi"},//5
{"name":"sda"},
{"name":"jofrewe"},
{"name":"re"},
{"name":"we"},
{"name":"we1"}
]
the result should be:
sda
jofrewe
re
name
we1
I suggest to use ng-show to hide some elements.
const app = angular.module("demo", []);
app.controller("test", function($scope) {
$scope.myarray=
[
{"name":"joe"},
{"name":"ana"},
{"name":"buf"},
{"name":"yei"},
{"name":"jsi"},
{"name":"sda"},
{"name":"jofrewe"},
{"name":"re"},
{"name":"we"},
{"name":"we1"}
];
$scope.min = 4;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="test">
<input type="range" ng-model="min"
min="0" max="10"/>
<div ng-repeat="item in myarray" ng-show="$index>=min">
{{item.name}}
</div>
</div>
You could do it manually:
ng-repeat="item in myarray.slice(4, myarray.length)"
Not necessarily clean or beautiful though.
You can provide a real expression in the ng-repeat directive. So just use slice to get the needed elements from the array:
<div ng-repeat="item in myarray.slice(5)">
{{item.name}}
</div>
for(var i=0;i<a.length;i++){
$scope.inputs=[
{name:a[i],value:b[i]}
];
}
this is my Javascript code i want to know how to write (ng-repeat) for arrays
Your JS is invalid, will produce length 1 array. Replace it with this:
$scope.inputs=[];
for(var i=0;i<a.length;i++){// be sure that a.length >=b.length
$scope.inputs.push({name:a[i],value:b[i]}); // push will add new entry to your inputs array.
}
The you can use it in ng-repeat:
<div ng-repeat="entry in inputs"> {{entry.name}} : {{entry.value}} </div>
You don't write loops surrounding a global variable. You leave the variable by itself and then you call the loop. Later you just use the global variable in the html code.
I made a cool snippet so you understand how it works:
angular.module('demo', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.inputs = [];
var a = ['name1', 'name2', 'name3'];
var b = [133,233,456];
//this code has to be called somewhere else. It might be part of a function.
for(var i=0; i < a.length; i++){
$scope.inputs.push( {name:a[i],value:b[i]} );
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="item in inputs">
<input ng-model="item.name"/>
</li>
</ul>
<!--This is only to display the content of $scope.inputs -->
<pre>{{inputs | json}}</pre>
</div>
</div>
If you have an array in your controller, with a scope that is visible in your html
angular.module('appName').controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.inputs = [
key: value,
...
];
}
In your html you would use ng-repeat within the scope of the controller. You can use the ng-repeat directive on several different html tags, such as <ul> lists, a div, select dropdowns and more
<div ng-controller="mainCtrl">
<ul>
<li ng-repeat="item in inputs">{{item.key}} <!-- Prints 'value' --></li>
</ul>
</div>
I would like to orderby below on card
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="card in myCards | orderBy:'card'">
<businesscard>{{card}}</businesscard>
</div>
</div>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.myCards = ['J', 'S', 'A'];
});
The result i am expecting is,
A
J
S
instead i am getting
J
S
A
To sort by the value, simply provide no parameters to orderBy (see orderBy array item value in Angular ng-repeat):
<div ng-repeat="card in myCards | orderBy">
Try this
<div ng-repeat="card in myCards | orderBy:'toString()'">
<businesscard>{{card}}</businesscard>
</div>
here is my code , i dont know what mistake i am doing??? Is there a built in filter or function to sort array of integers or numbers??
<body data-ng-app="app" data-ng-controller="controller1" >
<div class="container">
<div class="row">
<input type="text" ng-model="searchbox" />
<li ng-repeat="num in numbers|filter:searchbox|orderBy:number">
{{num}}
</li>
</div>
</div>
<script type="text/javascript">
var app=angular.module('app', []).controller('controller1', ['$scope', function($scope){
$scope.numbers=[10,8,6,7];
$scope.number=function(data)
{
return data.sort();
}
}
]);
</script>
</body>
Check out this answer orderBy array item value in Angular ng-repeat
This means that you can do something like this:
app.controller('ctrl', ['$scope', function($scope){
$scope.numbers = [10,8,6,7];
$scope.identity = angular.identity;
}]);
And
<li ng-repeat="num in numbers | orderBy:identity">
{{num}}
</li>
I'm binding the array data using reference $index but i'm getting arrays in group2 and value
I need like this:
grp1
abc,def
value1,value2
grp2
adf,cdf
value3,value4
But Im getting :
grp1
["abc","def"]
[["value1","value2"]]
grp2
["adf","cdf"]
[["value3","value4"]]
Below code i tried
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-app ng-controller="ListCtrl" ng-cloak>
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{group2[$index]}}</li>
<li>{{value[$index]}}</li>
</ul>
</div>
</body>
</html>
Script:
function ListCtrl($scope) {
$scope.group1 = ['grp1', 'grp2'];
$scope.group2 = [['abc', 'def'],['adf','cdf']];
$scope.value = [[['value1','value2']],[['value3','value4']]];
}
Try hardcoded way:
<div ng-controller = "fessCntrl">
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{group2[$index][0]}} {{group2[$index][1]}}</li>
<li>{{value[$index][0][0]}} {{value[$index][0][1]}}</li>
</ul>
</div>
Demo Fiddle
But if you want to invoke controller, I would write:
<div ng-controller = "fessCntrl">
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{printGroup(group2[$index])}}</li>
<li>{{printGroup(value[$index])}}</li>
</ul>
</div>
and method:
$scope.printGroup = function (group) {
var buff = '';
angular.forEach(group, function(val){
buff = buff + ' ' + val
});
return buff;
};
Demo 2 Fiddle