Sort information based on the alphabetical order of words using AngularJS

I'm working with AngularJS and I'm looking to filter data alphabetically in AngularJS.

Any assistance would be greatly appreciated!

This is the code snippet I've been using:

<script src="~/Scripts/angular.min.js"></script>
<script type="text/javascript">

var app = angular.module('Napp', []);
app.controller('GetAlphabetical', function ($scope) {
        $scope.names = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

        $scope.Customer = [
                            { Name: 'Nayeem', City: 'Indore' },
                            { Name: 'Sanjay', City: 'Bhopal' },
                            { Name: 'Aditya', City: 'Jhansi' }];
    });
</script>

<div data-ng-app="Napp" ng-controller="GetAlphabetical">

<input type="text" ng-model="myfilters" /> |
    <table>
        <tr>
            <td data-ng-repeat="h in names">&nbsp;
                <span ng-click="myfilters = {cust.Name = 'Nayeem' }">{{h}}</span>|
            </td>
        </tr>
    </table>
    <br />
    <ul>
        <li ng-repeat="cust in Customer | filter: myfilters">{{cust.Name + " " + cust.City}}</li>
    </ul>
</div>

Answer №1

ng-repeat="cust in Customer | filter: myfilters | orderBy: 'Name'"

This code snippet will arrange the list in ascending order based on the 'Name' attribute. If you wish to sort the list in descending order, you can modify the code by using '-Name'

UPDATE (Fiddle + Filterfix):

var app = angular.module('Napp', []);
app.controller('GetAlphabetical', function($scope) {
  $scope.filt = 'All';
  $scope.setFilter = function(letter) {
    $scope.filt = letter;
  };

  $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

  $scope.startsWith = function(customer) {
    var lowerStr = (customer.Name + "").toLowerCase();
    var letter = $scope.filt;
    if (letter === 'All') return true;
    return lowerStr.indexOf(letter.toLowerCase()) === 0;
  }

  $scope.Customer = [{
    ID: 1,
    Name: 'Nayeem',
    City: 'Indore'
  }, {
    ID: 2,
    Name: 'Sanjay',
    City: 'Bhopal'
  }, {
    ID: 3,
    Name: 'Aditya',
    City: 'Jhansi'
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="Napp" ng-controller="GetAlphabetical as ga">
  <table>
    <tr>
      <td ng-repeat="letter in names">&nbsp;<span ng-click="setFilter(letter)">{{letter}}</span>|</td>
    </tr>
  </table>
  <br />
  <ul>
    <li ng-repeat="cust in Customer | filter:startsWith | orderBy: 'Name'">{{cust.Name}}</li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Pause or Temporarily Halt in Jquery?

Looking to lift the object up, wait 1000ms, and then hide it. I found this snippet of code: $("#test").animate({"top":"-=80px"},1500) .animate({"top":"-=0px"},1000) .animate({"opacity":"0"},500); However, using ".animate({"to ...

The list marquee in HTML, JS, and CSS is not being properly rendered on

I recently made changes to a code that showcases a marquee scrolling a basic HTML list. Check it out here: I am facing 3 issues that I am struggling to resolve: JS: I want the marquee to continuously show text re-entering from the right just after it ...

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

Exploring Joomla: Customizing Template Options for Individual Menu Items

Hey there! I'm currently working on a website using Joomla 1.5 and I'm wondering if it's possible to load different template options based on the menu item ID. I came across the Gantry Framework (http://www.gantry-framework.org) which allow ...

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

Unleash the power of JQuery by capturing multiple events simultaneously, yet

What is the best way to handle multiple events like change and input, but only trigger one event at a time? For example: When an input event occurs, trigger the input event without triggering the change event. When a change event occurs, trigger the cha ...

Display/Conceal WP Submenu

Struggling to switch the behavior of my Wordpress menu. Want it to display when clicked, not when hovered: <nav> <ul> <li> <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ...

What could be the reason behind the malfunctioning of $.getjson?

I've been facing issues trying to access remote json data. Initially, I resorted to using as a temporary fix but it's no longer serving the purpose for me. As of now, I am back at square one trying to resolve why I am unable to retrieve the remo ...

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

JQuery receives an enchanting response from the magic line

I could really use some assistance with this problem. I've managed to make some progress but now I'm stuck! Admittedly, my JQuery skills are not that great! Currently, I have a magic line set up where the .slide functionality is triggered by cli ...

Is there a way to adjust the text color of a label for a disabled input HTML element?

If the custom-switch is active: the label text color will be green. If the custom-switch is inactive: the label text color will be red. A JavaScript (JQuery) method call can be used to activate one button while deactivating another. The Issue It appe ...

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

With JQuery UI, a dialog can be easily created. Simply pressing the escape key will close the dialog

I have a Login dialog that triggers an alert dialog when the user fails to fill in all the required fields. Pressing escape closes the login dialog instead of the alert dialog. Libraries used: jquery-1.7.2.js jqueryui-1.8.18.js // Function to display ...

jquery struggles to understand jsonp data during cross-domain heartbeats

I have embedded my module, which is an asp.net project, within a "portal". The portal creates an iframe that points to my URL. I understand that this setup may not be ideal, but it was not something I could control. To prevent the session on the main "po ...

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

Using Django with Ionic and ng-Cordova for efficient file transfer

Working on an exciting project with an Ionic hybrid app, I've come across a challenge regarding the feature of taking/choosing a picture and uploading it to the server. While there are numerous examples available for using the $cordovaFileTransfer plu ...

What could be causing the unexpected behavior of angular.isNumber()?

I'm encountering an issue with AngularJS's angular.isNumber, as it doesn't seem to work with strings that represent numbers. Is there a mistake on my end? Would utilizing isNaN() be a better approach? angular.isNumber('95.55') == ...

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

I am facing a critical need for a code review and unfortunately, I am unsure of where else to seek assistance besides here. Let me outline my current task: I am working on a user profile page that is designed to showcase users' comments. Users have t ...

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...