在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-模式「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; 
}