Question

我正在做的是：Angular使用2个具有相同型号的滤镜。首先必须对整个模型进行过滤，而另一个过滤器必须仅过滤特定的列，即StatusID，其中我通过下拉列表进行过滤。这是代码。

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

实际上，如果只使用其中一个过滤器，则此代码正常工作。我想让它一起工作。当我使用dropdown [object] [object]出现在我的文本框中时。

当我在第一个搜索框中搜索时，我仍然可以使用下拉列表过滤过滤后的结果。

有人理解我想说的话吗？

Answer 1

在这里你需要使用两个过滤器，一个用于所有，一个用于按列过滤。

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

并像这样过滤你的数组：

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

当您单击下拉列表时，在文本框中看到[对象对象]，在您的文本框中，ng-model应该是字符串类型，但是当您单击下拉列表时，您的ng-model是filter.StatusID，这是您指定的javascript对象作为下拉列表的模型，因此当您单击下拉列表时，angularjs会创建一个filter对象并将值赋给filter.StatusID。所以我们应该小心什么是对象和字符串等..，

AngularJS搜索过滤器 - 第一个过滤器：全部，第二个过滤器：特定列

1 个答案: