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

Question

引用这个question

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

1. 我正在应用 Mapped 过滤器。它为我过滤掉了所有映射变量。现在，我将更改其中一个过滤变量的值，一旦我删除了完整的值，该变量就会移至 Unmapped 列表，用户无法更改该变量。用户现在需要将过滤器更改为 All 或 UnMapped 过滤器以编辑该变量。

2. Unmapped 过滤器的情况相同。选择 Unmapped 过滤器，只要我尝试输入值，变量就会消失并移至“Mapped”列表。

我需要做的是仅当我使用 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>

用户界面:

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

请帮忙。

Answer 1

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

为什么不只更新数组($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]);
               }
           }
       }
   }
}

不要为这种需求使用过滤器，它会降低性能。