Question

大家好，

我对AngularJS的工作有点阻挠。我想基于<select> <option>

使用两个不同的过滤器过滤一个句子

主题1：

<select size="2" multiple="multiple" ng-model="selectedValue">
    <option value="value1">value1.1</option>
    <option value="value1">value1.2</option>
    <option value="value1">value1.3</option>
</select>

主题2：

<select size="2" multiple="multiple" ng-model="selectedValue">
    <option value="value1">value2.1</option>
    <option value="value1">value2.2</option>
    <option value="value1">value2.3</option>
</select>

在这里你可以看到我的ng：重复

<table ng-init="allValue = <?php echo htmlspecialchars(json_encode($table)); ?>;">
    <tr ng-repeat="value in allValue | filterMultiple:{valueCheck:selectedValue}">
        <td>
            <font class="title_recette">{{value.name}}</font>
            <br>
        {{value.valueCheck}}
        {{value.valueTime}}
   </td>
</tr>

在我的搜索过程中，我发现了这个链接：How to filter multiple values (OR operation) in angularJS，它解释了filterMultiple的工作原理，但是3个不同的值可以选择3个不同的值。

因此。我的＆＃34; valueCheck＆＃34;有一些单词的句子，我希望用主题1 +主题2 来过滤这些单词。目前，当我用一个过滤器时，我不能用另一个过滤器。我可以在自己身上积累过滤器，但不能在另一个上积累过滤器。

为例
主题1选项：日，月，年
主题2选项：快乐，悲伤，累了句子：有一天我很开心，有一天我很伤心，工作整整一个月很累
当我选择 Day + Year + Sad 时，我希望：
- 一天我很开心 - 另一个天我伤心

目前，如果我按顺序选择：Day + Year + Sad，只有Sad将被用于过滤器，因此，只有 - 有一天，我很伤心
将返回。

提前感谢任何帮助。

Answer 1

你有两个drodowns，两个都设置为相同ng-model。即ng-model="selectedValue"。所以价值被覆盖了。您需要为这两个下拉列表设置单独的ng-model。

Answer 2

首先，你不应该使用相同的模型绑定2个不同的选择（你作为主题1和主题2提到的那些）。

那么你可能应该看看使用ngOption而不是简单地自己写下选项，angular管理从html源填充的模型的方式（而不是范围定义的，或者在ng-init中）立场）是棘手的，并不总是做它应该做的事情。最后，它主要是javascript驱动的HTML，而不是那种方式。

对于过滤器，您只需将过滤器管道过滤到另一个过滤器：像这样：

<style>
.di-wrapper{
  float: right;
}


.di{
float: left;
}

</style>


<div class="col-lg-6">
    <form class="cf">
    <div class="di">
      <input class="di-wrapper shadowDepth1" type="text" id="input-name" placeholder="Name">
	  <header class="di-wrapper">Name</header>
      <div></div>
      <input class="di-wrapper shadowDepth1" type="email" id="input-email" placeholder="Email address">
	  <header class="di-wrapper">Email</header>
      <div></div>
      <input class="di-wrapper shadowDepth1" type="text" id="input-subject" placeholder="Subject">
	  <header class="di-wrapper">Subject</header>
      <div></div>
    </div>
  </form>
  </div>

请参阅general angular filter功能页面以获取更多信息。

AngularJS，用倍数过滤器

2 个答案: