Question

我需要使用Angular.js根据多列vlaue对表进行排序。我在下面解释我的代码。

<table class="table table-bordered table-striped table-hover" id="dataTable" >
                    <colgroup>
                    <col class="col-md-1 col-sm-1">
                    <col class="col-md-2 col-sm-2">
                    <col class="col-md-2 col-sm-2">
                    <col class="col-md-2 col-sm-3">
                    <col class="col-md-2 col-sm-3">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Sl. No</th>
                            <th>City name</th>
                            <th>Pincode</th>
                            <th>T-Factor</th>
                            <th>Edit</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody id="detailsstockid">
                        <tr ng-repeat="usr in objPincodeData " ng-if="objPincodeData.length > 0">
                            <td>{{$index+1}}</td>
                            <td>{{usr.city_name}}</td>
                            <td>{{usr.pincode}}</td>
                            <td>{{usr.t_factor}}</td>
                            <td><a ui-sref='app.settings.tariff.pincode'><input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editPincodeData(usr.id);"></a></td>
                            <td ng-if="usr.pincode !=0"><a ui-sref='app.settings.tariff.pincode'><input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deletePincodeData(usr.id);" ></a></td>
                            <td ng-if="usr.pincode==0">NA</td>
                        </tr>
                        <tr ng-if="objPincodeData.length == 0">
                            <td colspan="4">
                                <center>
                                  <p><b>No Record Found</b>
                                  </p>
                               </center>
                            </td>
                        </tr>
                    </tbody>
                </table>

在这里，我需要根据city name and pincode值对表格进行排序。在这里，我需要按照city name的字母顺序对表格进行排序，如果pincode=0排在第一位。

Answer 1

您可以使用angular的orderBy来实现。

您需要添加一个propertyName参数（将在单击列时更改），该参数将保留列名和相反的布尔值，然后在ng-repeat指令中使用它。

类似的东西： ng-repeat =“ usrPincodeData中的usr | orderBy：propertyName：reverse”

检出example from the docs

Answer 2

尝试一下

ng-repeat="usr in objPincodeData | orderBy:['city_name','pincode']"

如何使用Angular.js按列值对表进行排序

2 个答案: