I expect to see decesecing order base on points work but it doesn't, here is the demo http://jsfiddle.net/uRPSL/34/
ng-repeat
<ul ng-repeat="friend in user">
<li ng-repeat="relation in friend.relationship | orderBy:'points':true">
{{relation.name}}
</li>
</ul>
js
app.controller('Controller', function ($scope, $rootScope, $location) {
$scope.user = [{
'uId': 1,
'name': 'Joe',
'relationship': [{
'uId': 2,
'name': 'Jeremy',
'tabs': [{
'tabId': 1
}],
'tasks': [{
'name': 'Im Jeremy Lin'
}],
'points': 50
}]
}, {
'uId': 2,
'name': 'justin',
'relationship': [{
'uId': 3,
'name': 'Jordan',
'tabs': [{
'tabId': 2
}],
'tasks': [{
'name': 'Im Jasmin Jacob'
}],
'points': 100
}]
}];
})
In your example there is only 1 relationship in each of the relationship arrays. If you add items to those arrays, you can see that they are being sorted correctly. Here is an update of your fiddle, with extra data for visibility:
http://jsfiddle.net/8Ub6n/
$scope.user = [
{
'uId':1,
'name':'Joe',
'relationship':[
{
'uId':2,
'name':'Jeremy',
'points':50
},
{
'uId':2,
'name':'Michael',
'points':80
}
]
},
{
'uId':2,
'name':'justin',
'relationship':[
{
'uId':3,
'name':'Jordan',
'points':100
},
{
'uId':4,
'name':'Cameron',
'points':15
}
]
}
];
You can do this in nested loop by:
<ul ng-repeat="friend in user | orderBy:'relationship':'points':true">
<li ng-repeat="relation in friend.relationship">
{{relation.name}}
</li>
</ul>
Here orderBy:'Array':'expression':reverse
Related
i'm currently working on an application that is build with AngularJS as a base, and that obtains data through the prestashop webservice. All data obtained are JSON strings sorted through multiple files. Now i'm trying to create a searchbox that filters through some objects the moment the user fills in the searchbox. The easy way is ofcourse by using the ng-model and filter: combination like below:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
But what if you're using two different sources? and two different ng-repeats?
So in my application some of the data is about customers. The data is obtained through two different $http.get() functions. One is for the customers basic information. The second one is the address information. Take a look below:
// Get the customers
$http.get('config/get/getCustomers.php', {cache: true}).then(function(response){
$scope.customers = response.data.customers.customer
});
// Get the addresses
$http.get('config/get/getAddress.php', {cache: true}).then(function (response) {
$scope.addresses = response.data.addresses.address
});
By using ng-repeat and ng-if i'm able to filter the information and connect it together. ng-if="customer.id == address.id_customer" ng-repeat=...
A full example below:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<div ng-repeat="customer in customers">
<div ng-bind="customer.id + ' - ' + customer.name"></div>
<div ng-if="customer.id == address.id_customer" ng-repeat="address in addresses" ng-bind="address.place">
</div>
</div>
</div>
So as you can see i'm able to create the combination with the ng-if but now i would like to create a search input that's able to search through both fields. And that's where my issue starts. I'm able to create it for one ng-repeat. But what if i want to Search on the address and the customer? I would like to create the possibility of letting the user search by customer name, street address and ZIP code. But the ZIP code and address are from a different source.
I hope that someone has found a solution for this and if you have any questions please ask them in the comments.
As always, thanks in advance!
I'd suggest to map your customers array adding to each object it's own place this way:
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
This way your template will be easier to read, and you will be able to use your previous search.
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<div ng-repeat="customer in customers | filter:test">
{{ customer.id }} - {{ customer.name }}
<br>
{{ customer.place}}
</div>
</div>
</div>
I have a JSONfile like this:
vm.names = [{
'name': 'A'
}, {
'name': 'A'
}, {
'name': 'B'
}, {
'name': 'C'
}, {
'name': 'C'
}]
I using AngularJS filter repeat it in HTML:
<ul ng-repeat ="name in vm.names | unique'name'>
<li>{{name.name}}</li>
</ul>
Here is issue
A
B
C
So I want count item, I want display like this
A num:2
B num:1
C num:2
How can I do that?
Just use the groupBy filter provided by angular-filter like in this runnable fiddle demo:
View
<div ng-controller="MyCtrl">
<ul ng-repeat="item in names | groupBy: 'name' ">
<li>{{item[0].name}}: {{ item.length}}</li>
</ul>
</div>
AngularJS application
var myApp = angular.module('myApp', ['angular.filter']);
myApp.controller('MyCtrl', function($scope) {
$scope.names = [{
'name': 'A'
}, {
'name': 'A'
}, {
'name': 'B'
}, {
'name': 'C'
}, {
'name': 'C'
}];
});
How I Sort a nested Array (2D Array) array from filter of angularjs. It's very Complicated for Me. anybody can help. appreciated for me. thanks...
I have a 2D Array. now how I sort it within ng-repeat.
Template File...
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="list_ in list.list1 | orderBy:'name'">{{list_.name}}</li>
</span>
</ul>
JS file...
$scope.lists = [
{
no : 1,
list1 : [{
name : 'A'
},
{
name : 'M'
}]},
{
no : 2,
list1 : [{
name : 'B'
}]},
{
no : 5,
list1 : [{
name : 'Z'
}]},
{
no : 3,
list1 : [{
name : 'X'
},
{
name : 'T'
}]}
]
plunker here
It could achievable by flatten the array will all the inner object at the same level using custom filter
Markup
<body ng-app="myApp" ng-controller="myCon">
<ul>
<span ng-repeat="list in lists | flatten | orderBy:'+name'">
<li>{{list.name}}</li>
</span>
</ul>
</body>
Filter
app.filter('flatten', function(){
return function(array){
var flattenArray = [];
angular.forEach(array, function(value, index){
angular.forEach(value.list1, function(val, index){
flattenArray.push(val);
})
})
return flattenArray;
}
})
Plunkr Here
to answer your question of how to sort a nested Array array with an angularjs filter, you actually are already doing so. It isn't clear with your data, so I expanded it to make it show what is happening already:
http://plnkr.co/edit/8SjuLc?p=preview
js
var app = angular.module("myApp", []);
app.controller("myCon", myConFun);
myConFun.$inject = ['$scope'];
function myConFun($scope) {
$scope.lists = [{
no: 1,
list1: [{
name: 'Z'
}, {
name: 'X'
}, {
name: 'Y'
}, {
name: 'A'
}, {
name: 'M'
}, {
name: 'C'
}, {
name: 'B'
}]
}, {
no: 2,
list1: [{
name: 'B'
}]
}, {
no: 5,
list1: [{
name: 'Z'
}]
}, {
no: 3,
list1: [{
name: 'X'
}, {
name: 'T'
}]
}
]
}
html
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="sublist in list.list1 | orderBy:'name'">
{{sublist.name}}
</li>
----------
</span>
</ul>
output:
You may need to expand your question further if this isn't the behavior you need
My angular controller is following -
how to filter nested data like first row of json-
<script>
var myApp = angular.module('myApp', ['angular.filter']);
function VersionFilterCtrl($scope) {
$scope.limit=6;
$scope.orders = [
{ id:1, customer:[{ name: 'John1', id: 10 },{ name: 'John2', id: 100 }] },
{ id:2, customer: { name: 'William', id: 20 } },
{ id:3, customer: { name: 'John', id: 10 } },
{ id:4, customer: { name: 'William', id: 20 } },
{ id:5, customer: { name: 'Clive', id: 30 } }
];
}
</script>
and my html
<div ng-app="myApp">
<div ng-controller="VersionFilterCtrl">
<input type='text' name='name' ng-model='search.customer.name'>
<input type='text' name='name' ng-model='search.customer.id'>
<li ng-repeat="order in orders| filterBy: ['customer.name']: search.customer.name| filterBy: ['customer.id']: search.customer.id">
{{order.id}}{{order.customer.name}}
</li>
</div>
</div>
JSFIDDLE EXAMPLE
You approached this correctly in how you set up your search models to match the structure of the data you are filtering, i.e. search.customer.name and search.customer.id.
All you need to do is to apply the search object as the filter:
<li ng-repeat="order in orders | filter: search">
{{order.id}} | id: {{order.customer.id}} name: {{order.customer.name}}
</li>
plunker
A few other issues:
There is no filterBy (unless you create your own)
Your first order record has an array of customers - was this intentional? This plunker handles that case
Rather vague question, hopefully this will explain better. I'm grabbing the following JSON:
{
items: [
{ name: "item 1", options: [1, 2, 3] },
{ name: "item 2", options: [2, 3] },
{ name: "item 3", options: [1] }
],
options: [
{ id: 1, color: "red" },
{ id: 2, color: "blue" },
{ id: 3, color: "yellow" }
]
}
And I'm repeating over the items like so:
<div data-ng-repeat="item in items">
<span>{{ name }}</span>
<ul>
<li data-ng-repeat="i in item.options">{{i}}</li>
</ul>
</div>
Ideally, I'd like to be able to access the color parameter (and others) in my second ng-repeat loop (rather than just the number primitive). What's the best way to do that? Should I do a map on the options array for each item when I'm initializing, and turn each index into the full object (with id and color)? Or can I pass the index to the controller, do a look up and extend my scope with the option I looked up?
One option would be to use a function to get the options associated with your item.
http://plnkr.co/edit/RZvH2lWilQaIUJTq4DUL?p=info
<body ng-controller="MainCtrl">
<div data-ng-repeat="item in items">
<span>{{ name }}</span>
<ul>
<li data-ng-repeat="i in getOptions(item.options)">{{i.color}}</li>
</ul>
</div>
</body>
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ name: "item 1", options: [1, 2, 3] },
{ name: "item 2", options: [2, 3] },
{ name: "item 3", options: [1] }
];
$scope.options= [
{ id: 1, color: "red" },
{ id: 2, color: "blue" },
{ id: 3, color: "yellow" }
];
$scope.getOptions = function(options) {
var rv = [];
angular.forEach($scope.options, function(option, idx){
if(options.indexOf(option.id) > -1)
{
rv.push(option);
}
});
return rv;
}
});
<li data-ng-repeat="i in item.options">{{options[i-1].color}}</li>
Edit: If options array is unsorted:
<li data-ng-repeat="i in item.options">{{getColor(i)}}</li>
controller.js:
$scope.getColor = function(i) {
for(var index=0, len=$scope.options.length; index<len; index++) {
if ($scope.options.index.id===i) return $scope.options.index.color;
}
}
The best way is to return the options part in your JSON as this structure
options: {
"1": "red",
"2": "blue",
"3": "yellow"
}
Then you can access it by the key since it is a JavaScript object:
<li data-ng-repeat="i in item.options">{{options[i]}}</li>