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

时间:2014-03-16 00:10:09

标签: javascript angularjs sorting

我希望动态在下拉菜单值更改时对行进行排序。

示例代码:。

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

example

1 个答案:

答案 0 :(得分:1)

好的我假设你正在寻找一个 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>

这个示例是PLUNKER ...