The sorting functionality in Angular.js using the orderBy directive seems to be malfunctioning as it is not

Question

The sorting functionality in Angular.js using the orderBy directive seems to be malfunctioning as it is not

Within this code snippet, @Model.jsonString represents a string.

@model WebApplication1.Models.Car
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>

...

<body ng-app="myModule">
<div ng-controller="myContoller" ng-init="init(@Model.jsonString)">

...

</div>


</body>




</html>

The script.js code segment is shown below:

/// <reference path="angular.js" />
var app = angular
    .module("myModule", [])
    .controller("myContoller",
        function ($scope) {

            $scope.init = function(jsonString) {
                //This function acts as a private constructor for the controller

                $scope.cars = jsonString;


            };
            $scope.sortColumn = "Name";
        });

An issue has been encountered when attempting to sort columns using orderBy:sortColumn. Any insights or suggestions would be highly appreciated. Thank you.

javascript c#asp.net angularjs

Answer 1

Answer №1

When creating select box value names, ensure they match the array property name. Also, remove the plus icon and use - only if ordering items in descending order.

angular
.module("myModule", [])
.controller("myContoller", function($scope) {
$scope.init = function(jsonString) {
//This function acts as a private constructor for the controller
$scope.cars = [  
         {  
            'mileage':'16',
            'name':'asss',
            'model':'sst',
            ' engine':'aagaa',
            'color':'yellow'
         },
         {  
            'mileage':'14',
            'name':'sss',
            'model':'sdt',
            ' engine':'avaaa',
            'color':'red'
         },
         {  
            'mileage':'12',
            'name':'dsss',
            'model':'sgt',
            ' engine':'aaaaa',
            'color':'blue'
         }
      ];
};
    $scope.init ()
$scope.sortColumn = "Name";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myModule">
<div ng-controller="myContoller" 
 >

    OrderBy : <select ng-model="sortColumn">
        <option value="mileage">Mileage Asc</option>
        <option value="name">Name Asc</option>
        <option value="model">Model Asc</option>
        <option value="engine">Engine Asc</option>
        <option value="color">Color Asc</option>

    </select>
    <table class="table">
        <thead >

            <tr class="th">
                <th>Mileage</th>
                <th>Name</th>
                <th>Model</th>
                <th>Engine</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="car in cars | orderBy:sortColumn">
                <td>{{car.mileage}}</td>
                <td>{{car.name}}</td>
                <td>{{car.model}}</td>
                <td>{{car.engine}}</td>
                <td>{{car.color}}</td>

            </tr>

        </tbody>
    </table>
</div> 
</body>

Answer 2

When creating select box value names, ensure they match the array property name. Also, remove the plus icon and use - only if ordering items in descending order.

angular
.module("myModule", [])
.controller("myContoller", function($scope) {
$scope.init = function(jsonString) {
//This function acts as a private constructor for the controller
$scope.cars = [  
         {  
            'mileage':'16',
            'name':'asss',
            'model':'sst',
            ' engine':'aagaa',
            'color':'yellow'
         },
         {  
            'mileage':'14',
            'name':'sss',
            'model':'sdt',
            ' engine':'avaaa',
            'color':'red'
         },
         {  
            'mileage':'12',
            'name':'dsss',
            'model':'sgt',
            ' engine':'aaaaa',
            'color':'blue'
         }
      ];
};
    $scope.init ()
$scope.sortColumn = "Name";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myModule">
<div ng-controller="myContoller" 
 >

    OrderBy : <select ng-model="sortColumn">
        <option value="mileage">Mileage Asc</option>
        <option value="name">Name Asc</option>
        <option value="model">Model Asc</option>
        <option value="engine">Engine Asc</option>
        <option value="color">Color Asc</option>

    </select>
    <table class="table">
        <thead >

            <tr class="th">
                <th>Mileage</th>
                <th>Name</th>
                <th>Model</th>
                <th>Engine</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="car in cars | orderBy:sortColumn">
                <td>{{car.mileage}}</td>
                <td>{{car.name}}</td>
                <td>{{car.model}}</td>
                <td>{{car.engine}}</td>
                <td>{{car.color}}</td>

            </tr>

        </tbody>
    </table>
</div> 
</body>

Answer 3

Answer №2

The option values are in uppercase while the object properties are in lowercase.

Answer 4

The option values are in uppercase while the object properties are in lowercase.

The sorting functionality in Angular.js using the orderBy directive seems to be malfunctioning as it is not

Answer №1

Answer №2

Similar questions

Unable to locate the <router-view> component within VueRouter

The value entered for creating a payment method is invalid: the card must be in the form of an object

Tips for updating Angular HTML with data received from Socket.IO

Setting up TypeScript in an Angular 2 project and integrating Facebook login

What causes the disparity in the functionality of getServerSideProps between index.js and [id].js in NextJS?

When the scope variable is updated in AngularJS, the Digest process does not automatically get triggered

Which specific file name patterns does npm publish consistently exclude?

Guide on implementing iterative data path in v-for loop using Vue

The autoIncrement feature is causing a syntax error at or near "SERIAL"

What is the best way to handle multiple promises when loading a state in Angular?

Is it possible to track traffic using Alexa or SimilarWeb on a single-page application?

Struggling to make ng-repeat function properly within an AngularJS controller when working with arrays

Transform a row into a clickable element

Is there a way to instruct Express to refrain from parsing the request's query string?

Display the header on every single page using puppeteer

Converting HTML and CSS into a PDF using JavaScript

Ensuring Radio Button Selection in C# WPF App with Error Management

Angular directive - observing changes in dynamically grouped models

JavaScript does not show an error message if a function is called but has not been defined

Showing an array in an ASPX page using C# codebehind