javascript - 陷入基于 or 运算符逻辑制作 angularjs 过滤器的困境

标签 javascript angularjs

我有一个观点:

 <tr>
     <td>
         <label class="radio-inline">
              <input type="radio" name="Active" checked ng-click="sort('false','false','false')">Active
              <span class="label label-success">{{totalActive}}</span>
         </label>
     </td>

     <td>
         <label class="radio-inline">
             <input type="radio" name="Active" ng-click="sort('true','','true')">Archieve
             <span class="label label-warning">{{appliedJob.length-totalActive-totalClosed}}</span>
         </label>
     </td>
     <td>
         <label class="radio-inline">
             <input type="radio" name="Active" ng-click="sort('','true','')">Closed
             <span class="label label-warning">{{totalClosed}}</span>
         </label>
     </td>
 </tr>

 <tr data-dir-paginate="item in appliedJob|orderBy:'AppliedDate':true|filter:{HiredAnother:filterText, Closed:Closed,Withdraw:w}|itemsPerPage:5">

我的 JS 函数:

$scope.filterText = false;
$scope.Closed = false;
$scope.w = false;


$scope.sort = function (key,c,w) {
    $scope.filterText = key;
    $scope.Closed = c;
    $scope.w = w;

}

我想要的是,如果 Withdraw 为 false ,它将继续 Archieve (无论 HiredAnother 是否为 true/false )。但在过滤器中,它仅出现在 Archieve 列表中 HiredAnother =trueWithdraw=true。 如何在 ng-repeat 过滤器中创建 or(||) 运算符?

清除我的需求:

Active-->HiredAnother=false,Closed=false, Withdraw=false
Archieve-->HiredAnother=true/false,Closed=false, Withdraw=false/true(HiredAnother and Withdraw- must be false at least one)
Closed-->HiredAnother=true/false,Closed=true, Withdraw=false/true

==================更新了预期结果==========================

 <tr>
                <td>
                    <label class="radio-inline">
                        <input type="radio" name="Active" checked ng-click="sort('ac')">Active
                        <span class="label label-success">{{totalActive}}</span>
                    </label>
                </td>

                <td>
                    <label class="radio-inline">
                        <input type="radio" name="Active" ng-click="sort('ar')">Archieve


                        <span class="label label-warning">{{appliedJob.length-totalActive-totalClosed}}</span>
                    </label>
                </td>
                <td>
                    <label class="radio-inline">
                        <input type="radio" name="Active" ng-click="sort('cl')">Closed
                        <span class="label label-warning">{{totalClosed}}</span>
                    </label>
                </td>
            </tr>

<tr data-dir-paginate="item in appliedJob|orderBy:'AppliedDate':true|filter:myFilter|itemsPerPage:5">


 //Filter based on radio button
$scope.myFilter = function (i) {
    return i.HiredAnother == false && i.Withdraw == false && i.Closed == false; //Active
};

$scope.sort = function (term) {

    if (term == 'ac') {
        $scope.myFilter = function (i) {
            return i.HiredAnother == false && i.Withdraw == false && i.Closed == false; //Active
        };
    }

    else if (term == 'ar') {
        $scope.myFilter = function (i) {
            return i.HiredAnother == true || i.Withdraw == true && i.Closed == false; //Arcieve
        };
    }
    else if (term == 'cl') {
        $scope.myFilter = function (i) {
            return i.Closed == true; //Arcieve
        };
    }
}
//Filter based on radio button END

最佳答案

我建议使用为每个applyJob调用的自定义过滤器函数。

<tr data-dir-paginate="item in appliedJob | filter: myCoolFilter">

和函数(看看 docs )

$scope.myCoolFilter(value, index, array) {
    // change here according to your logic
    return $scope.filterText || $scope.Closed; 
}

关于javascript - 陷入基于 or 运算符逻辑制作 angularjs 过滤器的困境,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42572578/

相关文章:

javascript - 函数参数未定义 - Javascript

javascript - 迭代多个数组元素

javascript - 使用向上/向下箭头通过 AngularJS 聚焦和选择列表值

javascript - 在 Angular 服务中使用 $http 和 $q 的正确方法?

javascript - Googlebot 和 AngularJS 网站

javascript - 解决延迟不按预期工作

javascript - 是否可以将 key 代码发送到不在前面的应用程序?

javascript - 分派(dispatch)操作后应用程序状态立即发生变化

javascript - HTML : Body bigger height than its content

javascript - Angular ,ng 类,内部有重复函数