【问题标题】:jQuery Chosen Select not filtering my data on table with angularjs ng-modeljQuery选择不使用angularjs ng-model过滤表上的数据
【发布时间】:2015-09-02 15:27:12
【问题描述】:

我必须在我正在工作的网页上进行一些更改,在此之前,我有一个输入文本字段来过滤表格上的结果,这是代码:

  <p><input type="text" class="form-control"  ng-model="search" placeholder="Search..."></p> 

表格的代码是:

<tr ng-repeat="data in someFile| filter:search | orderBy:'name'">
     <td>{{data.state + ', ' + data.city}}</td>
     <td> more data goes here etc...</td>
</tr>

效果很好,但现在我需要更改 jQuery 选择的输入文本字段 select 以使用多个过滤器获取不同的信息。

我试过的代码是这样的:

 <select   data-placeholder="Search..." multiple class="control-group chosen-select" chosen id='sl_edo'  style="width:200px;">
            <optgroup   ng-repeat="data in someFile[0].state | orderBy:'name'" label={{data.name}}>
                <option  value=""> </option>
                <option  ng-model="search" ng-repeat="city in data.city | orderBy:'name'">
                                  {{city.name}}</option>
            </optgroup>
  </select> 

我知道 ng-model 代码应该像这样放在 html select 标记中:

<select  ng-model="search" data-placeholder="Search..."  etc..

但这不会过滤表中的结果,发生的情况是表变为空白,我不知道为什么,除非我退出过滤器,否则数据会返回表。我可以做些什么来使代码按预期工作?

编辑:我一直在看 ng-model="search" 中的值是什么,到目前为止,它们被视为这样的数组:["data1","data2 "...] (因为我在选项标签上添加了 value={{localidad.nombre}}),如果我像这样访问数组中的某个值 {{search [0]}},像 data1 一样正常显示文本,但仍未过滤表格结果,表格变为空白,有什么想法吗?

EDIT 2:我偶然发现了一些关于堆栈溢出的问题 How to filter multiple values (OR operation) in angularJS,这可能是个问题?我的意思是过滤器应该是多个。

【问题讨论】:

    标签: html angularjs jquery-chosen


    【解决方案1】:

    如果这与您之后的内容不同,请原谅我,但我写了一个简单的例子。我认为这涵盖了您试图追求的目标。JsFiddle 驱动您分配给选项标签的值。

                <p><select data-ng-model="search"  >
                <option value="NY">New York</option>
                <option value="NV">New Vegas</option>
                <option value="AL">Alabama</option>
                </select>
                </p>
    
                <table>
                <tr ng-repeat="data in someFile| filter:search | orderBy:'name'" style="border: 1px solid black;" >
                <td>{{data.number}}</td>
                 <td>{{data.state + ', ' + data.city}}</td>
                 <td> more data goes here etc...</td>
                </tr>
                <table>
    

    【讨论】:

    • 这更接近解决方案,但正如我之前提到的,当我打印 ng-model 显示的值时,现在像这样 ["someCity1"," someCity2"],至少比这个["\n\t\t\t\t\t\t\t\t someCity1","\n\t\t\t \t\t\t\t\t someCity2"]
    【解决方案2】:

    您缺少的是您希望搜索模型中的什么search 本身就是一个键值对象。

    <tr ng-repeat="data in someFile | filter:search.XXXX | orderBy:'name'">
    

    其中 XXXX 是您尝试搜索的属性名称。无论是search.Guid / search.Name 随便你。

    【讨论】:

    • 是的,当我在网页上打印 ng-model 值时,这有点用,我得到类似这样的东西 ["\n\t\t\t\t\t\t\t \t someCity1","\n\t\t\t\t\t\t\t\t someCity2"],所以它在工作,但由于某种原因,当我尝试放入过滤器时属性的名称,它不打印任何内容,也不过滤表。
    猜你喜欢
    • 1970-01-01
    • 2019-04-20
    • 2023-03-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-08
    • 2013-05-14
    • 1970-01-01
    相关资源
    最近更新 更多