根据属性“名称”对 html 单选按钮进行排序答案

【问题标题】：Sort html radio buttons according to the attribute 'name'根据属性“名称”对 html 单选按钮进行排序
【发布时间】：2015-10-21 03:53:39
【问题描述】：

<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 />

输出应该是这个顺序的单选按钮。

AIM 数据质量报告
AIM详细报告
合规报告

【问题讨论】：

只需更改view中的顺序
jsfiddle.net/L8pXL/59

标签： jquery angularjs sorting radio-button

【解决方案1】：

一种选择是将无线电输入的值保存在控制器中的数组中，然后使用 ng-repeat 输出它们并使用 orderby 对值进行排序：

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()"}
];

}

这是一个小提琴：http://jsfiddle.net/fsalin/u750fw7u/1/

【讨论】：