0

我正在使用 Angular JS 并且有一个小的博客提要，其中我有一个输入字段来过滤显示的内容。现在，我已经构建了自己的“嗡嗡声云”（或任何单词），并且正在尝试实现它，以便在单击其中一个单词时，输入字段的更新将使列表过滤器正确。

但是，当我设置输入字段的值时，不会触发其上的更改事件。所以我尝试使用 jQuery 手动触发它 - 仍然不起作用。

下面的代码：

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="query">
</div>
<div class="buzz">
    <h3>Buzz</h3>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">  
        <a href="" style="font-size:{{value*10}}px" onclick="$('#searchField').val('{{key}}'); $('#searchField').trigger('change'); ">{{key}}</a>
    </li>
</div>
</aside>
4

3 回答 3

1

你不应该像使用 AngularJS 那样使用 jQuery 来操作 DOM。相反，从基于 AngularJS 的单击处理程序中修改范围变量以影响更改。

在这种情况下，一个棘手的情况是，您正在从内部的范围内设置原始值，ngRepeat由于 JavaScript 进行原型继承的方式，这可能会产生意想不到的结果。有关更多详细信息，请参阅此 Stack Overflow 答案，但要在此示例中修复，我们将创建一个query附加值的对象：

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="data.query">
</div>
<div class="buzz">
    <h3>Buzz</h3>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">  
        <a href="" style="font-size:{{value*10}}px" ng-click="data.query = key">{{key}}</a>
    </li>
</div>
</aside>
于 2013-08-03T20:10:55.473 回答
1

对于某些指令，您永远不应该将 jQuery 与 angular exept 一起使用。总有更好的方法来做到这一点。如果您使用范围值，请不要忘记使用 ng-style，因为如果更改，IE 不会更改任何内容{{value}}。

<aside>
    <div class="filters">
      Search: <input id="searchField" ng-model="query">
    </div>
    <div class="buzz">
        <h3>Buzz</h3>
        <li ng-repeat="(key, value) in buzz" class="thumbnail">  
            <a href="#" ng-style="'font-size': value*10 + 'px'" ng-click="query = key">{{key}}</a>
        </li>
    </div>
    </aside>

编辑

好的，现在我发现表达式中有什么问题。当我们在 ng-repeat 中调用 query 时，它会创建一个新范围，因此我们需要将新值分配给父范围。你也忘了 tu put an <ul>to wrap <li>s。

我创建了一个Plunker来演示它。

<aside>
<div class="filters">
  Search: <input id="searchField" ng-model="query">
</div>
<div class="buzz" ng-init="buzz = {'size': 2, 'size2': 4}">
    <h3>Buzz</h3>
    <ul>
    <li ng-repeat="(key, value) in buzz" class="thumbnail">   
        <a href="#" ng-style="{'font-size': value*10 + 'px'}" ng-click="$parent.query = key">{{key}}</a> <!-- EDIT need to add $parent to query -->
    </li>
    </ul>
</div>

于 2013-08-03T20:15:40.077 回答
0

您应该使用 ng-click 设置输入的 ng-model：

<a href="" style="font-size:{{value*10}}px" ng-click="query=key">{{key}}</a>

在您的示例中，您使用的是 angularjs 世界之外的 jQuery，因此当您更改它时它不会触发模型的新计算。

于 2013-08-03T20:09:51.757 回答