如何比较角度js中大于小于场景的数据 [英] How do I filter data comparing greater than less than scenario in angular js

问题描述

我确实有一个表格，其中我将有下拉列表，其中包含'< =，> =，='选项和另一个输入字段，其中用户输入要过滤的值。所以它就像是< = -1。 > = 0，= 1



如何使用角度js过滤表格中的数据？





我试着编写一个函数，现在它甚至没有在过滤前用初始数据填充表格。



我是什么尝试过：



项目





订单



行



状态



ToLocation



数量







< br $> b $ b





{{c}}











RegDate















{{c}}



















{{p.Item}}

{{p.Order}}

{{p.Line}}

{{p.Status}}

{{p.ToLocation}}

{{p.Qty}}

{{p.RegDate}}

I do have table which where i will have dropdown list which will have '<=, >=, =' option and another input field where user enter the value to filter. so it will be like if <= -1. >=0 , =1

How do i filter data in my table using angular js?


I tried to write a function and now it does not even populate table with initial data before filter.

What I have tried:

Item


Order

Line

Status

ToLocation

Qty







{{c}}





RegDate







{{c}}









{{p.Item}}
{{p.Order}}
{{p.Line}}
{{p.Status}}
{{p.ToLocation}}
{{p.Qty}}
{{p.RegDate}}

<div ng-controller="demoController">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td>Item<br />
                            <input type="text" ng-model="Search.Item" />
                        </td>
                        <td>Order<br />
                            <input type="text" ng-model="Search.Order" /></td>
                        <td>Line<br />
                            <input type="text" ng-model="Search.Line" /></td>
                        <td>Status<br />
                            <input type="text" ng-model="Search.Status" /></td>
                        <td>ToLocation<br />
                            <input type="text" ng-model="Search.ToLocation" /></td>
                        <td>Qty<br />
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" ng-model="compValue"/>
                                    </td>
                                    <td>
                                        <select ng-model="compFilter" ng-change="onChange(compFilter,compValue)">
                                            <option ng-repeat="c in Comparers" value="{{c}}">{{c}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>RegDate<br />
                            <table>
                                <tr>
                                    <td>
                                        <input type="text" ng-model="dateFilter" />
                                    </td>
                                    <td>
                                        <select ng-model="compFilter" ng-change="onChange(compFilter,compValue)">
                                            <option ng-repeat="c in Comparers" value="{{c}}">{{c}}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="p in Products |filter:Search">
                        <td>{{p.Item}}</td>
                        <td>{{p.Order}}</td>
                        <td>{{p.Line}}</td>
                        <td>{{p.Status}}</td>
                        <td>{{p.ToLocation}}</td>
                        <td>{{p.Qty}}</td>
                        <td>{{p.RegDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

Angualr代码：

Angualr code :

var app = angular.module("demoModule", []);

app.controller("demoController", function ($scope, $http) {

    $scope.Comparers = ['=', '>=', '<='];
    $scope.compValue = "";

    $http(
        {
            method: "POST",
            url: "ProdForm.aspx/GetProduct",
            data: {},
            contentType: "application/json",
            dataType: "json"

        }).then(function (response) {

            $scope.Products = JSON.parse(response.data.d);
            debugger;
        });

    $scope.onChange = function (compFilter, compValue, Products) {
       
            var newArray = new Array();
            if (compFilter === '=') {
               ;
               for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty == compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }
            else if (compFilter === '>=') {
               
                for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty >= compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }
            else {

                for (var i = 0; i < Products.length; i++) {
                    var j = 0;
                    if (Products[i].Qty >= compValue) {
                        newArray[j] = Products[i];
                        j = j + 1
                    }
                }
            }

            $scope.Products = newArray;
    }
});

推荐答案

范围，

http ）{

scope.Comparers = ['='，'> ='，'< ='];

scope.Comparers = ['=', '>=', '<='];

这篇关于如何比较角度js中大于小于场景的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！