CODEWITHSUNDEEP
jqueryangularjssortingradio-button
user3248288
user3248288

Reputation: 1

Sort html radio buttons according to the attribute 'name'

<input type="radio" name="AIM Data Quality Report" value="1" ng-click="DisplayMonthYear()" />
AIM Data Quality Report
<br />
<input type="radio" name="Compliance Report" value="14" ng-click="DisplayYear()" />Compliance Projects Report
<br />
<input type="radio" name="AIM Detailed Report" value="2" ng-click="DisplayMonthYear()" />AIM Detailed Report
<br />

The output should be radiobuttons in this order.

AIM Data Quality Report
AIM Detailed Report
Compliance Report

Upvotes: 0

Views: 1327

Answers (1)

Fredrik Sch&#246;ld
Fredrik Sch&#246;ld

Reputation: 1658

One option is to keep the values of the radio inputs in an array in the controller and then use ng-repeat to output them and orderby to sort the values:

HTML:

<div ng-controller="MyCtrl">
    <div ng-repeat="input in radioInputs | orderBy:'name'">
        <input type="radio" name="{{input.name}}" value="{{input.value}}" ng-click="{{input.functionOnClick}}" />{{input.name}}
        <br />
    </div>
</div>

Javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.radioInputs = [
        {id: 0, name: 'AIM Data Quality Report', value: "1", functionOnClick: "DisplayMonthYear()"},
        {id: 1, name: 'Compliance Report', value: "14", functionOnClick: "DisplayYear()"},
        {id: 2, name: 'AIM Detailed Report', value: "2", functionOnClick: "DisplayMonthYear()"}
];

}

Here is a fiddle: http://jsfiddle.net/fsalin/u750fw7u/1/

Upvotes: 1

Related Questions