javascript - ng-dblclick 上的 AngularJS 更改输入[文本]

Question

我有一个用 ngRepeat 填充的表，并且有一个输入[文本]，您可以在其中过滤该表。

这工作正常，但现在我想到了一个想法，可以双击表中的元素并将文本添加到搜索输入[文本]，以便在双击时直接应用过滤器关于文本。

不幸的是，它没有按预期工作。我已经这样做了:

<input type="text" placeholder="Search..." data-ng-model="userinput" />
<p data-ng-dblclick="userinput='query'">Double click to use query to search</p>

在 ngRepeat 中，我使用 ng-model “userinput” 进行过滤，但文本输入的值没有改变。

我还尝试将模型“userinput”指定为 Controller 中的变量，然后根据函数更改它，但它不起作用。

我有什么遗漏吗？

通常我会更改 Controller 中的变量，它应该自动更改文本输入，因为它使用此变量作为模型。然后，它也应该更改过滤器，但什么也没有发生。

正在工作

代码ngRepeat

 <tr data-ng-repeat="dat in data | filter: userInput | filter: tsSelect | filter: advSelect |  filter: checkedFilter | orderBy: ['client', 'ssrstatus'] | limitTo: totalDisplay" id="{{ dat.bannerid }}"> <!-- | unique: 'bannerid' | filter: errorSelect| -->
<td>
    <input type="checkbox" id="checked" data-ng-model="dat.checked" data-ng-change="updateCheckedStatus(dat._id['$id'], dat.checked)">
    <label for="checked">Checked</label>
</td>
<td data-ng-dblclick="search(dat.clientid)">{{ dat.clientid }}</td>
<td data-ng-dblclick="search(dat.client)" class="txtleft">{{ dat.client }}</td>
<td data-ng-dblclick="search(dat.tsengineer)">{{ dat.tsengineer }}</td>
<td data-ng-dblclick="search(dat.bannerid)">{{ dat.bannerid }}</td>
<td data-ng-dblclick="search(dat.bannertype)" class="txtleft">{{ dat.bannertype }}</td>
<td data-ng-dblclick="search(dat.width + 'x' + dat.height)">{{ dat.width == 0 ? 0 : dat.width - 50 }}x{{ dat.height == 0 ? 0 : dat.height - 50 }}</td>
<td data-ng-dblclick="search(dat.ssrstatus)" class="txtleft">{{ dat.ssrstatus }}</td>
<td data-ng-dblclick="search(dat.datebegin)">{{ dat.datebegin }}</td>
<td data-ng-dblclick="search(dat.dateupdated)">{{ dat.dateupdated }}</td>
<td>
    <button class="preview {{ dat.bannerid }}" data-ng-click="showPreview(dat.bannerid, dat.clicktotestbanner, dat.width, dat.height)"></button>
</td>
<!-- <td id="{{ dat.bannerid }}" class="banner-preview"></td> -->

Controller

$scope.userInput = "";
$scope.search = function(query){
    $scope.userInput = query;
}

Answer 1

我认为这是因为您的 userinput='query' 在 ng-repeat 内进行了评估。

让我们将外部作用域命名为“scopeA”。搜索输入的 ng-model="userinput" 将引用 scopeA.userinput。

众所周知，会为每个 ng-repeat 项创建一个新范围。如果您在这些范围之一(将其命名为scopeB)中运行userinput='query'，您将把'query'分配给scopeB.userinput 而不是 scopeA.userinput。

在这种情况下，scopeB 可能是scopeA 的子级。如果您使用 angular-batarang Chrome 扩展程序查看作用域树，您会发现两个作用域都有 userinput 字段。

一种解决方案是使用函数为用户输入赋值，而不是 ng-dblclick 表达式。喜欢:

<p data-ng-dblclick="setUserinput('query')">Double click to use query to search</p>

并将函数 setUserinput 添加到您的范围:

$scope.setUserinput = function(newValue) {
    $scope.userinput = newValue;
}