Question

我能够成功地为我的表应用过滤器。现在我想改变这个过滤器的工作方式。情况如下：

我正在应用Mapped过滤器。它为我过滤掉了所有映射变量。现在我将更改其中一个已过滤变量的值，一旦删除完整值，变量就会移动到Unmapped列表，用户无法更改变量。用户现在需要将过滤器更改为All或UnMapped过滤器以编辑该变量。
在Unmapped过滤器的情况下也是如此。选择Unmapped过滤器，尝试输入值后，变量将消失并移至“已映射”列表。

我需要做的是仅当我使用ng-change从下拉列表中选择过滤器时应用过滤器，当我尝试编辑某个变量时，过滤器不起作用。

以下是代码：

对于过滤器：

 $scope.filterOpt = 'All';
    $scope.emptyOrNull = function (variable) {
        if ($scope.filterOpt == "All")
            return true;
        if ($scope.filterOpt == "Mapped")
            return variable.Name && variable.Variable
        if ($scope.filterOpt == "UnMapped")
            return !(variable.Variable) ;
    }

HTML：

 <select class="selectpicker form-control" ng-model="filterOpt" ng-change="emptyOrNull()">
   <option value="All">All</option>
   <option value="Mapped">Mapped</option>
   <option value="UnMapped">Un-Mapped</option>
 </select>

和表：

 <tr ng-repeat="var in Mappings | filter: searchVariable | filter : emptyOrNull">
   <td>{{var.Name}}</td>
    <td>
     <div><input-dropdown name="fqn" ng-model="var.Variable" list="variables" ng-disabled="var.IsTrue"></input-dropdown></div> 
    </td>
   </tr>

用户界面：

在上图中，当我选择从过滤器映射并尝试更改/删除Value1时，它不会消失。

请帮忙。

Answer 1

您可以做的是添加条件过滤器。这意味着只有在您希望使用过滤器时才应用过滤器，并且在您不想要的时候不应用过滤器。

您可以检查输入何时聚焦，并切换变量以禁用或启用过滤器

<input-dropdown name="fqn" ng-model="var.Variable" ng-focus="disable=true" list="variables" ng-disabled="var.IsTrue"></input-dropdown>

要使用条件过滤

<tr ng-repeat="var in Mappings | filter : (disable ? '' : emptyOrNull)">

然后，您可以在更改disable下拉列表时将true更新为mapped/unmapped。

希望这有帮助

Answer 2

基本上，当您只想更改下拉值时，我想要更新UI时，我不明白为什么要| filter : emptyOrNull。

为什么不让您更新数组（$scope.Mappings）。在此数组中，您只能推送要显示的值。

删除过滤器并更新您的下拉ng-change功能，如下所示

这里origArray是您的原始数组，我只是更改范围变量

$scope.emptyOrNull = function (variable) {
    $scope.Mappings = [];
    if ($scope.filterOpt == "All") {
        $scope.Mappings = angular.copy(origArray);
    } else {
        for (var i = 0; i < origArray.length; i++) {
           if ($scope.filterOpt == "Mapped") {
               if (origArray[i].Name && origArray[i].Variable) {
                   $scope.Mappings.push(origArray[i]);
               }
           }

           if ($scope.filterOpt == "UnMapped") {
               if (!origArray[i].Variable) {
                   $scope.Mappings.push(origArray[i]);
               }
           }
       }
   }
}

不要使用过滤器来满足这种要求，这会降低性能。

在angularjs中编辑表格内容时防止过滤

2 个答案: