Sorting blocks according to values of dropdown menus in AngularJS

Question

I want dynamically sort the rows when dropdown menus values is changing.

Example code: .

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

It's possible in angularjs?

example

you question is not clear can you provide a plunk or give us more detail by editing your question... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 16, 2014 at 9:42
of course it is possible but is your data come from $scope?? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 16, 2014 at 12:20
@wickY26k, no, not from $scope. Data come from inputs or selects. For example: I insert some value into input field, after that I push "sort" button and finally I must get this sorted result. — FlamesoFF
– FlamesoFF, Commented Mar 16, 2014 at 12:33
ok here is the deal, do you want to make it angular way or not if you decide to make an angular application just bind your other inputs as well... if you create a plunker I could help you better... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 16, 2014 at 12:36

Poyraz Yilmaz · Accepted Answer · 2014-03-16 17:26:03Z

1

Ok I assume that you are looking an angularjs solution for this problem although your example is not an angularjs application...

Start with creating row data in our controller..

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

this array help us to build our table with the use of ngRepeat and here is the magic you want dynamicly sort rows depend on selection...

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

here is a PLUNKER for this example...

answered Mar 16, 2014 at 17:26

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FlamesoFF Over a year ago

Thanks. This it what i wanted!

Collectives™ on Stack Overflow

Sorting blocks according to values of dropdown menus in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related