AngularJS filter not working with $scope variable

Question

My AngularJS app is supposed to show courses and their equivalences in a table. The table is supposed to dynamically show the results based on the input from a select element.

HTML

<form name = "Select University" ng-show = "courseType == 'extern'">
    <label for = "University"> University: </label>
    <select name = "University" id = "repeatSelect" ng-change = "changeIt()"ng-model = "univs.repeatSelect">
            <option ng-repeat = "univ in univs.uniNames | orderBy: 'School'" > {{univ.School}} </option>
    </select>
    </form>



 Courses at {{univs.repeatSelect}}
    <table>
            <tr>
            <th> Course </th>
            <th> Equivelance </th>
            </tr>

            <tr ng-repeat="x in names | orderBy: 'className' | filter:univs.repeatSelect">
            <td>{{ x.className }}</td>
            <td> {{x.equiv}} </td>
            </tr>
    </table>

JavaScript

$http.get("http://linux.students.engr.scu.edu/~cmulloy/COEN174/getSchools.php")
    .success(function (response) 
    {
            $scope.univs.uniNames = response.records;
    });

$scope.univs = 
    {
            repeatSelect: null,
            uniNames: null,
    };

The scope variable {{univs.repeatSelect}} shows up on the page. For example, it will show "Courses at UCLA" above the table. But the table is empty when I use univs.repeatSelect as the filter argument for ng-repeat. However, if I explicitly use 'UCLA' as the filter argument, it works and shows the courses at UCLA. Is there something I'm missing?

Pankaj Parkar · Accepted Answer · 2015-11-01 22:27:45Z

0

You should add value attribute to your select options which will assign that value attribute value to the respective ng-model.

<select name = "University" id = "repeatSelect" ng-change="changeIt()" ng-model="univs.repeatSelect">
    <option ng-repeat="univ in univs.uniNames | orderBy: 'School'" value="{{niv.School}}"> {{univ.School}} </option>
</select>

Better option would be use ng-options here while dealing with select box.

<select name="University" id="repeatSelect" 
   ng-change="changeIt()" ng-model="univs.repeatSelect" 
   ng-options="univ.School as univ.School in univs.uniNames | orderBy: 'School'">
</select>

answered Nov 1, 2015 at 22:27

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Pankaj Parkar Over a year ago

@Charles Mulloy does it helped?

Collectives™ on Stack Overflow

AngularJS filter not working with $scope variable

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