Question

我有一个用ngRepeat填充的表格，我有一个输入[text]，您可以在其中过滤表格。

这很好但现在我想出了可以双击表格中的元素并将文本添加到搜索输入[文本]的想法，以便双击时直接应用滤镜在文本上。

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

<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”指定为变量，然后按功能更改它但不起作用。

我有什么遗失的吗？

通常我会更改控制器中的变量，它应该自动更改文本输入，因为它使用此变量作为模型。然后，它应该更改过滤器，但没有任何反应。

WORKING

代码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> -->

控制器

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

Answer 1

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

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

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

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

一种解决方案是使用函数将值赋给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;
}

关于ng-dblclick的AngularJS更改输入[文本]

1 个答案: