Having issues with getting this filter to work.
$scope.imgCollection.then(function (images) {
$scope.images = images.thisGal_images;
if ($scope.images[0].order == '0') {
console.log('orgName');
$scope.images = $filter('orderBy')($scope.images, 'orgName');
} else {
console.log('sort order');
$scope.images = $filter('orderBy')($scope.images, 'sortOrder');
console.log($scope.images);
}
});
$scope.images returns a list of images from the database. On the initial upload, the sortOrder column is populated with '0' as they can be sorted via ui:sortable. So on the initial view I base the sort order on the file name. After the initial view the DB is written and the first image is given the sortOrder of 1 and increments from there.
This could be my misunderstanding of $filter, but $scope.images = $filter('orderBy')($scope.images,'sortOrder'); is not ordering my $scope.images based on sortOrder.
Thanks
I created a demo for you and hopefully you can compare the code and figure out the issue.
I guess you might forget to inject $filter module. Please take a look a the demo.
<div ng-app="myApp" ng-controller="ctrl">
<div ng-repeat="image in images">{{image}}</div>
<button ng-click="order('0')">By orgName</button>
<button ng-click="order('1')">By sortOrder</button>
</div>
var app = angular.module('myApp', []);
function ctrl($scope, $filter) {
$scope.images = [{
orgName: 'B',
sortOrder: 111
}, {
orgName: 'A',
sortOrder: 12
}, {
orgName: 'D',
sortOrder: 13
}, {
orgName: 'C',
sortOrder: 14
}];
$scope.order = function (order) {
if (order == '0') {
$scope.images = $filter('orderBy')($scope.images, 'orgName');
} else {
$scope.images = $filter('orderBy')($scope.images, 'sortOrder');
}
}
}
Working Demo
Related
How could i return couple name:[apple, orange, carrot]
[http://jsfiddle.net/GruffBunny/QHtD8/2/]1
function MyCtrl($scope) {
$scope.products = [
{id:"1",type:"fruit"},
{id:"2",type:"meat"},
{id:"3",type:"drink"},
{id:"4",type:"vegetable"},
{id:"5",type:"dairy"}
];
$scope.fruitOrVeg = function(product){
return product.name == ['1','4','5'];
};
Thank you very much
Change your template, to call function:
<li ng-repeat="item in products | filter:fruitOrVeg()">{{item.name}}</li>
and filter function, return new function
$scope.fruitOrVeg = function() {
return function(item) {
return ['1', '4', '5'].indexOf(item.id) > -1;
}
};
Added JSFiddler
Try using an AngularJS custom filter.
app.filter('filterByFruitOrVeg', function() {
return function(array) {
arr = arr.filter(payment, function(objectInArray) {
return objectInArray.type === 'fruit' || objectInArray.type === 'vegetable';
});
}
});
My question is related to creating substr in Angular.JS
Suppose i have a model:
$scope.myName = 'John Smith'
but when during the rendering of the model on the page i need only the initials of the name like:
<p>{{myName | some directive/filter }}<p>
Output should be :: JS
i tried creating many directives but unable to fetch the exact output even i have tried the limitTo filter but it give only the starting first 2 letters of the name.
Workbook is here
With assumption that name tokens are separated by SPACE , as given in your question
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<label>Name : {{name}}</label><br/>
<label>Short Name : {{name|shortName}}</label>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('shortName', function() {
return function(x) {
var shortName="", nameTokens=[];
nameTokens = x.split(" ");
nameTokens.forEach(function(token){ shortName+=token[0] });
return shortName;
};
});
app.controller('namesCtrl', function($scope) {
$scope.name = 'John Smith';
});
</script>
</body>
angular
.module('myApp',[])
.run(function($rootScope){
$rootScope.title = 'myTest Page';
})
.controller('testController', ['$scope', function($scope){
$scope.myName = 'saurabh raman';
}]).filter('filter', function() {
return function(input) {
var name = input;
var inls = name.match(/\b\w/g) || [];
inls = ((inls.shift() || '') + (inls.pop() || '')).toUpperCase();
return inls;
}
});
view
<p>{{myName | filter}}</p>
</body>
</html>
I was hoping there was a built-in filter for it, but it seems there isn't one, so I've created this filter:
var relConclusaoApp = angular.module("relatorioConclusaoApp", []);
relConclusaoApp.filter('onlyinitials', [function () {
return function (input) {
if (input) {
return input
.split(/\s+/)
.filter(s => s.length > 2)
.map(s => s.charAt(0).toLocaleUpperCase())
.join(".")
.concat(".")
}
return input;
}
}])
This filter is going to transform Floor Jansen into F.J. (e.g.)
It should be used in your template as:
{{nameToBeTransformed | onlyinitials}}
Still new to angular and js. I have a list:
<ul ng-repeat="rate in resources">
<li> <input type="checkbox" ng-model="isSelected" ng-change="appendList(rate)"> </li>
</ul>
When a user clicks on them, i'd like the value to be pushed to a list:
$scope.rateValues = {
'rates': {
'fastrates': {
'value': '',
}
}
};
But I'd like to append a key, value pair to the fastrates like this:
$scope.rateValues = {
'rates': {
'fastrates': {
'value': '100',
'value': '200',
'value': '300',
'value': '400',
}
}
};
I guess i'm stuck on my ng-change function in my controller to handle this. I know this is far from complete but at least the value changes. I need to make it check if it has been added and if so then remove it from the key, value from the object. If it's unchecked and they check it. It needs to create a new 'value': rate pair in the fastrates obj.
$scope.appendList = function(rate){
$scope.rateValues.rates.fastrates.value = rate
}
Here's a plnkr I started http://plnkr.co/edit/MhqEp7skAdejdBRpXx2n?p=info. Any scripting advice on how to accomplish this?
You can't use same key multiple times. You can use array of object.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.resources = {value:['100','200','300', '400']}
$scope.rateValues = {
'rates': {
'fastrates': []
}
};
$scope.appendList = function(rate){
$scope.rateValues.rates.fastrates.push({ value: rate });
}
});
Don't forget to remove value when you uncheck the checkbox.
http://plnkr.co/edit/MhqEp7skAdejdBRpXx2n?p=preview removing value from array when you uncheck checkbox
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.resources = {
value: ['100', '200', '300', '400']
}
$scope.rateValues = {
'rates': {
'fastrates': {
'value': [],
}
}
};
$scope.appendList = function(rate) {
var index = $scope.rateValues.rates.fastrates.value.indexOf(rate);
if (index < 0) {
$scope.rateValues.rates.fastrates.value.push(rate);
} else {
$scope.rateValues.rates.fastrates.value.splice(index, 1);
}
}
});
i am trying to display element only if the uid exist in JSON array:
i've tried it so far:
var app = agular.module('myApp', []);
app.controller('myCtrl', function () {
$scope.uid = '10';
$scope.datas = [{
'id': '1',
'name': 'abc'
}, {
'id': '2',
'name': 'xyz'
}];
});
<p ng-if="datas.length | filter:{id: uid}">ID exist in array</p>
DEMO FIDDLE
you can define function on scope that would that for u (and use filter service inside)
i.e.
<div ng-app="mod">
<div ng-controller='MCtrl'>
<p ng-show="exists(1)">ID exist in array</p>
</div>
</div>
mod.controller('MCtrl', function($scope, $filter){
var items = [123,2,1]
$scope.exists = function(val){
return $filter('filter')(items, val).length > 0;;;
}
});
if you'd like to do it in view
<p ng-show="(items|filter:1:true).length > 0">ID exist in array</p>
btw, true means it should be exact match
Hi please see here: fiddle
<div ng-app="app">
<div ng-controller="myCtrl">
<p ng-show="check()">ID exist in array</p>
<p ng-hide="check()">ID NOT exist in array</p>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
$scope.uid = '2';
$scope.datas = [{
'id': '1',
'name': 'abc'
}, {
'id': '2',
'name': 'xyz'
}];
$scope.check = function () {
var ifExist = false;
angular.forEach($scope.datas, function (data) {
if (data.id == $scope.uid)
ifExist = true;
});
return ifExist;
}
});
Say I create an Angular app and write some new filters: Show only odds, and show only lucky numbers.
There's an oddList filter and a luckyList filter:
var app = angular.module('app', []);
app.filter('oddList', function() {
return function(items) {
var filtered = [];
angular.forEach(items, function(item) {
if (item % 2 !== 0)
filtered.push(item);
});
return filtered;
};
});
app.filter('luckyList', function() {
return function(items) {
var filtered = [];
angular.forEach(items, function(item) {
if (item === 2 || item === 7 || item === 11)
filtered.push(item);
});
return filtered;
};
});
In the view portion, I can chain these filters:
<ul><li ng-repeat="number in numbers | oddList | luckyList">{$number}</li></ul>
When this works, I should see 7 and 11 remaining.
I want to make my filters variable for this ng-repeat. Is there something I can do that's similar to this process?
Say I name the variable filter filter:listFilter so that in our controller, we can dynamically update $scope.listFilter.
<ul><li ng-repeat="number in numbers | filter:listFilter">{$number}</li></ul>
And the controller with pseudo code:
app.controller('main', function($scope, $filter) {
$scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
$scope.listFilter = $filter('oddList | luckyList');
});
Any idea how I could chain (variable) filters in the controller? Would like to be able to toggle between just odd, just lucky and/or both.
An approach is to use a function to return the filtered data:
function MainCtrl($scope, $filter) {
$scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
$scope.filteredNumbers = function() {
var result = $scope.numbers;
if ($scope.oddListEnabled) {
result = $filter('oddList')(result);
}
if ($scope.luckyListEnabled) {
result = $filter('luckyList')(result);
}
return result;
};
}
And the template:
<ul>
<li ng-repeat="number in filteredNumbers()">
{{number}}
</li>
</ul>
Here is a plunkr: http://plnkr.co/edit/4ectDA?p=preview