Question

我正在使用Angular JS，并且有一个小的博客供稿，我有一个输入字段，用于过滤显示的内容。现在，我已经构建了自己的“嗡嗡云”（或者不管是什么词），并且我正在尝试实现它，以便在单击其中一个单词时，更新输入字段将使列表正确过滤。 / p>

但是，当我设置输入字段的值时，不会触发其上的更改事件。所以我尝试用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>

Answer 1

使用AngularJS时，不应该使用jQuery来操纵DOM。而是从基于AngularJS的单击处理程序中修改范围变量以影响更改。

在这个例子中，一个棘手的情况是你在ngRepeat内部设置一个原始值，由于JavaScript进行原型继承的方式，这可能会产生意想不到的结果。有关详细信息，请参阅this Stack Overflow answer，但要在此示例中修复，我们将创建一个附加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>

Answer 2

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

<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中调用查询时，它会创建一个新的范围，因此我们需要将新值分配给父范围。你也忘了把<ul>包裹<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>  </li> </ul> </div>

Answer 3

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

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

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

使用AngularJS在输入字段上手动触发更改事件

3 个答案: