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>
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>
I would like to do this:
ng-show="node.status | limitTo:1:1 == 1"
In a simple angular expression it works: {{ node.status | limitTo:1:1 }} =1
I can't get it to work in a ngShow or ngIf statement....
limitTo works only with ng-repeat, you cannot have on ng-if or ng-show
Creates a new array or string containing only a specified number of
elements. The elements are taken from either the beginning or the end
of the source array, string or number, as specified by the value and
sign (positive or negative) of limit.
alternatively you can have a function that implements your logic and call it within ng-if or ng-show
You can use charAt to get the specified character from a string and then use with
ngIf/ngShow or ngSwitch:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="node in [{status: '*C,1,0,19,064'}, {status: '*S,1,0,19,064'}] track by node.status">
<div ng-if="node.status.charAt(1) === 'C'">This is status C</div>
<div ng-if="node.status.charAt(1) === 'S'">This is status S</div>
</div>
<hr/>
<div ng-repeat="node in [{status: '*C,1,0,19,064'}, {status: '*S,1,0,19,064'}] track by node.status"
ng-switch="node.status.charAt(1)">
<div ng-switch-when="C">This is status C</div>
<div ng-switch-when="S">This is status S</div>
<div ng-switch-default>This is default status</div>
</div>
</body>
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 have a short piece of sample here where myself trying to get total of values in angular way as,
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
<ul>
<li ng-repeat="x in myarr" > {{x.val}}
<span ng-if="$last">, Total - {{total = total+x.val}}</span>
</li>
</ul>
</div>
But total is incorrect. How can it be achieved?
EDIT: Myself trying to get total within the ng-repeat loop beside last element. There is an accepted answer in this question and below answer also work in same logic. But In that method, the function getTotal() will call myarr.length times and each time the array loops in controller right? So as per example in the question, array will loop completely 6 times (myarr.length + once in ng-repeat ie, 5+1). Do i wrong?
Try this method, no function used in controller , using ng-init in ng-repeat
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
<ul >
<li ng-repeat="x in myarr" ng-init="$parent.total = $parent.total + (x.val)"> {{x.val}}
<span ng-if="$last">{{total}}</span>
</li>
</ul>
</div>
Another method ,
Use array.reduce to add sum of array Link
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
$scope.addTotal = function(){
var sum = $scope.myarr.reduce($scope.add);
return sum.val;
}
$scope.add = function(a,b){
return {val:a.val + b.val};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
<ul >
<li ng-repeat="x in myarr" > {{x.val}}
<span ng-if="$last">{{addTotal()}}</span>
</li>
</ul>
</div>
Try doing all calculations in angular controller itself and storing it in varaible. But if you are worried about values in array constantly changing you can also use a calcTotal function in your controller. Also ng-repeat should be on li and not ul.
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
<ul >
<li ng-repeat="x in myarr"> {{x.val}}
<span ng-if="$last">, Total - {{getTotal()}} or {{totalValue}}</span>
</li>
</ul>
</div>
Your controller will be like
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
//first approach
$scope.totalValue = 0;
for(i=0;i<$scope.myarr.length;i++){
if($scope.myarr[i] && $scope.myarr[i].val)
$scope.totalValue+=$scope.myarr[i].val;
}
//OR
//second approach
$scope.getTotal = function(){
var total = 0;
for(i=0;i<$scope.myarr.length;i++){
if($scope.myarr[i] && $scope.myarr[i].val)
total+=$scope.myarr[i].val;
}
return total;
}
});
If you are using variable approach, you will have to explicitly calculate $scope.getTotal everytime the array values change. By the function approach it will happen itself, but binding functions on UI is little expensive as they keep re-calculating on every digest cycle.
You can use angular.forEach to loop and have you total count.
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.total = 0;
$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
angular.forEach($scope.myarr, function(value){$scope.total+=value.val});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">
<ul >
<li ng-repeat="x in myarr" > {{x.val}}
<span ng-if="$last">{{total}}</span>
</li>
</ul>
</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>