I want to split a list of countries in alphabetical order using Angularjs.
Somewhat like A : America , Australia B: Brazil, Bhutan ...
The list is coming from a table named countries. I tried to apply angularjs filter on the first alphabet of the country name but failed. Do I have to create a custom filter for it?
Ok I am going to answer my own question finally got it working.
I was pulling a list of countries from a postgres db in the following format:
{"alpha2":"ao","alpha3":"ago","numeric":"024","country":"Angola"}
I wanted to split the list of countries in alphabetical order like this :
[Example] http://infoplease.com/countries.html#ALPHA-A
I finally got it working by writing a custom filter:
angular.module('countryFilter', []).filter('cfilter', function() {
return function(input,x) {
var groups = [];
for(var i = 0; i < input.length; i++) {
if (input[i].country.substring(0,1) == x)
groups.push(input[i]);
} return groups; }
});
and using it as :
ng-repeat="data in countries | cfilter:'A'
{{data.country}}
Do let me know if there is any better way for doing this...
This is another possible solution without the use of a filter
http://www.bennadel.com/blog/2456-Grouping-Nested-ngRepeat-Lists-In-AngularJS.htm
He creates a new array with a label and the data. The advantage is that in the template you don't have to name all the possible letters.
For my own I take the first letter of the client from the object and store that in the label. In that way I only get the letters I used.
In customer I have stored an array with objects.
for(var i = 0; i < customers.length; i++){
var customer = customers[i];
if(customer[ 'title' ].substring(0,1) !== groupValue){
var group = {
label : customer[ 'title' ].substring(0,1),
customers : []
};
groupValue = customer.title.substring(0,1);
groups.push( group );
};
group.customers.push( customer );
};
Sort Item List is a jQuery plugin that creates iOS-style sticky headers similar to those seen in the Music and Contacts apps on Apple devices
check link :
http://www.codingprogrammer.com/tutorialdemo/jquery-tutorial/sort-items-alphabetically-jquery-2/
Related
This is my first post. I am in a trouble in my laravel project
Here is my data table.
I have student Id like 1,2,3. every students have multiple results followed by courses.
I need to arrange them like that
I tried groupby and got this result
Is there any possible way to arrange them according to students.
Thank You
code: controller:
public function notification()
{
$auth_id = Auth::user()->id;
$teacher = Teacher::where('user_id', $auth_id)->first();
$teacher_id = ($teacher->id);
$batch = Batch::where('teacher_id', $teacher_id)->first();
$courses = AssignCourses::with('course')
->where('semester_id', $batch->semester_id)
->get();
$current_semester_results = Result::with(['student', 'course'])
->where('semester_id', $batch->semester_id)
->get()
->groupBy('student.id');
$batch_students = Student::with('result')
->where('semester_id', $batch->semester_id)
->get();
return view('users.teacher.my_batch.notification', compact(['current_semester_results', 'courses', 'batch_students']));
}
Just use the $batch_students and apply any aggregations on your PHP code, it is easier to do it.
$batch_students = Student::with('result')
->where('semester_id', $batch->semester_id)
->get();
$batch_students_grouped = $batch_students->groupBy('result.student_id');
Note: I could not test since I don't have the tables, so you might need to change the student_id nest/access index in the last line of code.
you can print out your $batch_students_grouped->all() and see how you should iterate your data and show it in frontend.
I have an array of objects:
scope.values = [
{'key1':'valueA', 'key2': 'valueD'},
{'key1':'valueB'},
{'key1':'valueC'}
]
And I would like to filter a search input, which can contain multiple words separated by either comma or space:
<input ng-model="scope.search"></input>
We can list the array as follows:
<p ng-repeat="index, obj in scope.values | filter:scope.search"></p>
However, this only works for one input. What can I do when I have multiple inputs e.g. John Doe.
Note that I want it to be conditional. So not if John or Doe is found, but when John and Doe are found.
I don't think the built-in filter can do that. What you probably want is a custom filter, as described in the documentation here (about half way down the page) and in the official tutorial here.
For example, this custom filter should do what you want.
app.filter("multiSearch", [
function() {
//"data" is your searchable array, and "search" is the user's search string.
return function(data, search) {
//Get an array of search values by splitting the string on commas and spaces.
var searchArray = search.toLowerCase().split(/[, ]/);
//Use javascript's native Array.filter to decide which elements to cut and to keep.
return data.filter(function(item) {
//If the item contains ALL of the search words, keep it.
var foundCount = 0;
for (var searchElement of searchArray) {
for (var attribute in item) {
if (
String(item[attribute])
.toLowerCase()
.includes(searchElement)
) {
foundCount++;
break;
}
}
}
if (foundCount === searchArray.length) {
//Matched all search terms. Keep it.
return true;
}
else {
//Not a match. Cut it from the result.
return false;
}
});
};
}
]);
Then in your html you can call it like so:
<p ng-repeat="index, obj in scope.values | multiSearch:scope.search"></p>
Another thing you might consider, as suggested in the comments, is to forego using filters altogether and just run the logic inside your controller. You can use a lot of the logic provided in the example filter above -- you just have to implement your own system to run the filtering logic when the search query changes. There are benefits in avoiding filters in angularjs, but that is another topic.
I'm building a chrome extension and trying to get an array of tabs using chrome.tabs.query({url: arrayOfUrls}):
chrome.tabs.query({url: this.tabUrlsList}, function(tabs){
var ids = [];
if(tabs){
//creates an array of intergers (tab ids)
for(var i = 0; i < tabs.length; i++){
ids[i] = tabs[i].id;
}
console.log(tabs.length)
console.log(ids)
\\move stuff around using the tabs' ids
The problem is when the url array has more than one google page (say http://mail, http://developer, chrome://extensions), query returns the id for only one of them. Does anybody know what to do?
Thanks
I have a field in my AngularJS scope called rid
This is always a 4 letter code such as 1A22 or 4D23 (number, letter, number, number)
I want to filter out (i.e not show) any that meet certain conditions
begin with a 2K
begin with a 5
begin with 1C
Now I know I can build individual filters onto my ng-repeat (service in services), but i think the way forward is a nice custom filter where I can feed in an array of conditions that i want to filter out. I suspect a string of regex conditions is the answer
/^2k|5|1C*/
Can anyone advise the best way to approach this custom filter? Thanks
EDIT : This was my solution, regex from the accepted answer and the following filter
myApp.filter('regex', function() {
return function(input, field, regex) {
var patt = new RegExp(regex);
var out = [];
for (var i = 0; i < input.length; i++){
if(!patt.test(input[i][field]))
out.push(input[i]);
}
return out;
};
});
then I just use this in my ng-repeat
regex:'rid':'^(?:2K|5|1C)[A-Z0-9]+$'"
You were not so far. This regex will match any text starting with 2K, 5 or 1C:
^(?:2K|5|1C)[A-Z0-9]+$
See the demo
If you want to make sure the length is 4, you can use this one:
^(?=[A-Z0-9]{4}$)(?:2K|5|1C)[A-Z0-9]+$
See the demo
I want to create a predictive text custom filter in angular JS that filters out an array of strings based on search query and order them by the number of words matching with the words in the search query.
The filter should return the same and all the records even if the order of the words in the search query dosn't matches with the order they appear in the records array.(For example if I search for "table cloth" as a search query it should be able to match against "Decorative cloth for table" also (Note that angular filter dosen't do this))
Also only prefix matches for words inside the search query should be allowed(for example if I have a record containing a word "phone", if I type "one" some where in the search query it should not shown).
I wrote a custom filter myself that does the following things
Prefix word match only.
Random word index matching.
Sorting based on number of words matched.
Here's the code
HTML
<ul>
<li ng-repeat = "helpFAQ in helpCtrl.helpFAQs | filter: helpCtrl.filterBySearch | orderBy: ['-matchCount','priority'] | limitTo : helpCtrl.helpFaqLimit track by $index " ><a title="">{{helpFAQ.question}}</a></li>
<li ng-if ="helpCtrl.showLessFaq"><a ng-click = "helpCtrl.showMoreFaq()" title="helpCtrl">[...]</a></li>
</ul>
AngularJS custom filter
vm.helpFAQs = [{"question":"How can i hide an site?",
"priority":1},
{"question":"How can i stop an ad?",
"priority":7},
{"question":"How do i change my email address?",
"priority":9},
{"question":"How do i pay electricity bill?",
"priority":3},
{"question":"How do i see the number of times I logged in?",
"priority":6},
{"question":"How do i set up a new connection?",
"priority":3},
{"question":"Where can i see disclosures for my account?",
"priority":1},
{"question":"Where can i see my privacy setting?",
"priority":4},
{"question":"Why can't i see my profile?",
"priority":2}
];
vm.serchBoxKeyed = function(searchTerm){
vm.regex = new RegExp('\\b' + vm.escapeRegExp(searchTerm), 'i');
}
vm.filterBySearch = function(topic) {
topic.matchCount = 0;
var searchTextSplit = vm.searchQuery.toLowerCase().split(' ');
for(var y = 0; y < searchTextSplit.length; y++){
vm.serchBoxKeyed(searchTextSplit[y]);
var prefixMatch =vm.regex.test(topic.question);
if(topic.question.toLowerCase().indexOf(searchTextSplit[y]) !== -1 && prefixMatch){
topic.matchCount = topic.matchCount + 1;
}
}
if(topic.matchCount>0)
return true;
else
return false;
};
vm.escapeRegExp = function(searchTerm){
return searchTerm.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}