CODEWITHSUNDEEP
angularjs
FirdhausKM
FirdhausKM

Reputation: 85

Angular select does not filter my ngRepeat

I'm using select field to filter my content as shown below:

           <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 ticket-status">Ticket Status:</label>
                    <div class="col-sm-4" ng-controller="LookupController as lookupCtrl" ng-init="getTicketStatusList()">
                        <select ng-options="t.Name for t in ticketstatus track by t.Id" ng-model="statusFilter" class="form-control"></select>
                    </div>
                </div>
            </div>

            <div class="list-ticket" ng-repeat="ticket in myticket | filter : {Status: statusFilter}: true">
                <a href="/ticket/info/{{ticket.Id}}">
                    <ul class="list-inline ticket-list">
                        <li>
                            <i class="fa fa-ticket fa-4x" aria-hidden="true"></i>
                        </li>
                        <li>
                            <p class="ticket-title">#{{ticket.TicketNo}}: {{ticket.Title}}</p>
                            <p>{{ticket.Category}}</p>
                            <p>{{ticket.Priority}}</p>
                        </li>
                    </ul>
                </a>
            </div>

The thing is, the list doesn't get updated when I change the selection on the select field. Can someone please tell me what I've done wrong? If the select field is not generated using angular, this filter works fine. Thanks in advance.

Upvotes: 1

Views: 60

Answers (2)

truonghungit
truonghungit

Reputation: 312

Please try with 

<select ng-options="t.Status as t.Name for t in ticketstatus track by t.Id" ng-model="statusFilter" class="form-control"></select>

Upvotes: 0

Darren Christopher
Darren Christopher

Reputation: 4811

The problem is your filter and ngRepeat are not in the same Controller; therefore the $scope is different (as @user2718281's comment above). Try using the same Controller for both of them (place it on the their parent <div>). So, it would be something like:

<div class="parent-container" ng-controller="LookupController as lookupCtrl">
    <div class="form-horizontal">
        <div class="form-group">
        <!--Filter term here-->
        </div>
    </div>
    <div class="list-ticket" ng-repeat="ticket in myticket | filter : {Status: statusFilter}: true">
        <!--ngRepeat here-->
    </div>
</div>

Hope this could help you.

Upvotes: 1

Related Questions