AngularJS 1.x：空列上的過濾器錯誤（？）

我有一個包含多個過濾器文件（每列一個）的表。AngularJS 1.x：空列上的過濾器錯誤（？）

<table> 
    <tr> 
     <th><input type="text" ng-model="search.name"></th> 
     <th><input type="text" ng-model="search.phone"></th> 
     <th><input type="text" ng-model="search.secret"></th> 
     <th><input type="text" ng-model="search.nullcol"></th> 
    </tr> 
    <tr ng-repeat="user in users | filter:search:strict"> 
     <td>{{user.name}}</td> 
     <td>{{user.phone}}</td> 
     <td>{{user.secret}}</td> 
     <td>{{user.nullcol}}</td> 
    </tr> 
</table>

一切正常，除了在包含空值的列過濾罰款：當我輸入的過濾領域的東西，用空的所有行消失了（正確），但刪除過濾器就不會恢復它們。

這裏有一個plunkr：https://plnkr.co/edit/viMHsxBHI4CjfjWqWjti

有沒有一種方法，使工作？

來源

2016-09-16 archimede

我可能已經找到了一個解決方案：我把一塊手錶放在過濾器字段上，當空的時候，我從搜索對象中刪除屬性。這是更新的plunkr：https://plnkr.co/edit/7wE58QBUAqPHe8CGb4Bj 不過，我想知道是否存在更優雅的解決方案。 – archimede

發生這種情況是因爲在輸入文本並將其刪除後，search.nullcol的計算結果爲空字符串而非空值。

以下是一種解決方案：您可以將ng-change應用於nullcol輸入以檢查它是否爲空字符串。如果是，請將其設置爲undefined。老實說，我不知道這是否是最佳做法，但它確實有效。我很驚訝，我無法找到這個怪癖的其他解決方案。

<th><input type="text" ng-model="search.nullcol" ng-change="checkIfEmpty()"></th>

添加到JS：

$scope.checkIfEmpty= function(){ 
    if ($scope.search.nullcol === '') { 
     $scope.search.nullcol = undefined; 
    } 
};

這將 '重置' 的過濾器，如果該輸入是空的。 https://plnkr.co/edit/Uv5DdQ70kGRYZQEwXgrn?p=preview

來源

2016-09-16 17:36:24 devthorne

感謝您的回覆。您的解決方案與我的相似，在發佈我的評論之前沒有看到它。我仍然不完全明白髮生了什麼：我明白，「空字符串」可以被認爲與空值不同，但對於非空值也是如此。我仍然認爲在這種情況下需要適當的修復。 – archimede

AngularJS 1.x：空列上的過濾器錯誤（？）

回答

相關問題