CODEWITHSUNDEEP
javascriptc#asp.net-mvcangularjsfilter
Anaiah
Anaiah

Reputation: 633

AngularJS search filters -- 1st filter : all , 2nd Filter :specific column

What I am doing is : Angular using 2 filters with the same model. First one must going to filter for the whole model and the other filter must filter a specific column only which is StatusID wherein I did the filtering through dropdown. Here's the code.

  <div class="col-xs-4">
                    <div class="col-xs-10">

                        <h4><b>Search :</b></h4>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-search"></span>
                            </span>
                            <input type="text" name="search" data-ng-model="filter" class="form-control" placeholder="Search here (e.g. 151234 or Pille)"  />
                        </div>

                    </div>

                      <div class="col-xs-10">

                        <h4><b>Search by Status :</b></h4>
                        <div class="input-group">

                        <select data-ng-model="filter.StatusID" class="form-control">
                            <option value="" selected>-- Select Status --</option>
                            <option value="1"> New </option>
                            <option value="2"> Processing </option>
                            <option value="3"> PR Approved </option>
                            <option value="4">Qouting</option>
                            <option value="5">Qouting Approved</option>
                            <option value="6">PO Processing</option>
                            <option value="7">Closed</option>
                            <option value="8">Cancelled</option>
                            <option value="9">Rejected</option>
                            <option value="10">PO Issued</option>
                            <option value="11">On Delivery</option>
                            <option value="12">Received</option>
                            <option value="13">AP Posting</option>
                            <option value="14">Payment</option>
                            <option value="15">Sourcing</option>
                            <option value="16">Re-Processing</option>
                        </select>

                    </div>
                        </div>



                </div>
            </div>

Actually this code is working if only one of the filters is used . I wanted it to work together. When I use the dropdown [object] [object] occurs on my textbox.

When I'll search on the first search box and the I can still use the dropdown for filtering the filtered result.

Does anyone understand what I am trying to say ?

Upvotes: 1

Views: 459

Answers (1)

Konammagari
Konammagari

Reputation: 364

Here you need to use two filters , one is to is for all and one is for filtering by column.

 <div class="col-xs-4">
                <div class="col-xs-10">

                    <h4><b>Search :</b></h4>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </span>
                        <input type="text" name="search" data-ng-model="filterAllColumns" class="form-control" placeholder="Search here (e.g. 151234 or Pille)"  />
                    </div>

                </div>

                  <div class="col-xs-10">

                    <h4><b>Search by Status :</b></h4>
                    <div class="input-group">

                    <select data-ng-model="filterOptions.StatusID" class="form-control">
                        <option value="" selected>-- Select Status --</option>
                        <option value="1"> New </option>
                        <option value="2"> Processing </option>
                        <option value="3"> PR Approved </option>
                        <option value="4">Qouting</option>
                        <option value="5">Qouting Approved</option>
                        <option value="6">PO Processing</option>
                        <option value="7">Closed</option>
                        <option value="8">Cancelled</option>
                        <option value="9">Rejected</option>
                        <option value="10">PO Issued</option>
                        <option value="11">On Delivery</option>
                        <option value="12">Received</option>
                        <option value="13">AP Posting</option>
                        <option value="14">Payment</option>
                        <option value="15">Sourcing</option>
                        <option value="16">Re-Processing</option>
                    </select>

                </div>
                    </div>



            </div>
        </div>

and filter your array like this :

<div data-ng-repeat="item in myModels | filter : filterAllColumns|filterOptions"></div>

When you click on dropdown ,in textbox you see [object object], in your textbox ng-model should be a string type but when you click on dropdown your ng-model is filter.StatusID which is a javascript object you assigned as a model to the dropdown, so when you click on dropdown angularjs create an object of filter and assigns value to the filter.StatusID. So we should be careful of what is going to be an object and string etc..,

Upvotes: 1

Related Questions