angular.js - Problem using the value of {{}} expression as dom attribute in AngularJS

Question

I wrote a filter myself and the code is as follows:

app.filter('selected', function() {
      return function(input, value) {
        var out = "";
        if(input == value){
            out = "selected";
        }
        return out;
      };
    });

The page code is as follows:

            <select class="form-control input-sm" style="width: 60px;">
                <option {{data.page.pageSize|selected:5}} >5</option>
                <option {{data.page.pageSize|selected:10}} >10</option>
                <option {{data.page.pageSize|selected:20}} >20</option>
                <option {{data.page.pageSize|selected:50}} >50</option>
            </select>

But writing it like this doesn’t work now, and it has no effect when pageSize is any value. Can anyone give me some advice? Thanks!

Answer 1

How about you stop using filter and change it like this?

 <select class="form-control input-sm" style="width: 60px;">
    <option ng-selected="data.page.pageSize === 5">5</option>
    <option ng-selected="data.page.pageSize === 10" >10</option>
    <option ng-selected="data.page.pageSize === 20" >20</option>
    <option ng-selected="data.page.pageSize === 50" >50</option>
</select>

Answer 2

<select class="form-control input-sm" style="width: 60px;">
    <option data-ng-selected="{{data.page.pageSize | selected: 10}}" >10</option>
    <option data-ng-selected="{{data.page.pageSize | selected: 20}}" >20</option>
    <option data-ng-selected="{{data.page.pageSize | selected: 50}}" >50</option>
</select>


app.filter('selected', function() {
      return function(input, value) {
        return input == value;
      };
    })