在AngularJS中，根据下拉菜单的值对块进行排序

Sorting blocks according to values of dropdown menus in AngularJS

本文关键字：排序下拉菜单 AngularJS 更新时间：2023-09-26

我想要动态排序时，下拉菜单值正在改变的行。

示例:.

<table border="1">
    <tr>
        <td>
            <select>
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
        <td>Tom</td>
    </tr>
    <tr>
        <td>
            <select>
                <option>1</option>
                <option>2</option>
                <option selected>3</option>
            </select>
        </td>
        <td>Phill</td>
    </tr>
    <tr>
        <td>
            <select>
                <option>1</option>
                <option selected>2</option>
                <option>3</option>
            </select>
            <td>John</td>
        </td>
    </tr>
</table>

在angularjs?

示例

好的，我假设你正在寻找一个angularjs解决方案来解决这个问题，尽管你的例子不是一个angularjs应用程序…

首先在控制器中创建行数据。

$scope.tableRows = [{
    select: "1",
    name: "Tom"
  }, {
    select: "2",
    name: "Phil"
  }, {
    select: "3",
    name: "John"
  }];

这个数组帮助我们使用ngRepeat来构建我们的表，这里是你想要的魔法，根据选择动态排序行…

<table border="1">
    <tr ng-repeat="row in tableRows | orderBy:'select':reverse">
        <td>
            <select ng-model="row.select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
        <td>{{row.name}}</td>
    </tr>
</table>