gaurav.s23 Ответов: 1

Как фильтровать данные, сравнивая больше, чем меньше, чем сценарий в angular js


У меня есть таблица, в которой у меня будет выпадающий список, который будет иметь опцию "<=, >=, = " И еще одно поле ввода, в которое пользователь вводит значение для фильтрации. так будет, если <= -1. >=0, =1

Как отфильтровать данные в таблице с помощью angular js?


Я попытался написать функцию, и теперь она даже не заполняет таблицу исходными данными перед фильтром.

Что я уже пробовал:

Предмет


Заказ

Линия

Статус

Толокация

Кол-во







{{с}}





RegDate







{{с}}









{{стр.Предмет}}
{{стр.Заказ}}
{{стр. Линия}}
{{p. статус}}
{{p. ToLocation}}
{{стр. Кол-во}}
{{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 :
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;
    }
});

Karthik_Mahalingam

можете ли вы разместить его в jsfiddle?

1 Ответов

Рейтинг:
11

Andy Lanng

Ну я сам придумал версию jsFiddle: CodePerfect: Проблемы С Фильтром[^]

Таким образом, здесь есть много проблем, но давайте выделим некоторые основные из них

1: сброс счетчика циклов
Ваш фильтр для петель:

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


2: Добавить в массив
Итак,в начале каждого цикла он устанавливает j = 0? вы хотите, чтобы j сбросил каждый цикл?
newArray[j] почему? Просто сделай это:
let result = []
for(...){
  result.push(item)
}

Нет необходимости перебирать результирующий массив. просто добавляйте новые предметы одним толчком.

3: Добро пожаловать в Ecmascript6 (или javascript, как вы его сейчас называете)
Проверить это:
newArray = $scope.Products.filter(p=>p.Qty>=compValue)

ты только что это видел? вау :П

Итак, вот вся ваша функция фильтра до сих пор (с переключателем)
$scope.onChange = function(compFilter, compValue) {
  $scope.Products = $scope.allProducts
  let newArray = [];
  switch(compFilter)
  {
      case '=':
    newArray = $scope.Products.filter(p=>p.Qty==compValue)
    break;
    case '>=':
    newArray = $scope.Products.filter(p=>p.Qty>=compValue)
    break;
    default:
    newArray = $scope.Products.filter(p=>p.Qty<=compValue)
    break;
  }
  $scope.Products = newArray;
}


Я внес несколько небольших изменений, но вы поняли идею.

Мы можем пойти гораздо дальше. Вы используете около 5% потенциала angular и около 0,1% javascript. Если хотите, я расширюсь. Мы можем сделать это простое устройство действительно очень аккуратным


[no name]

Сэр, благодарю вас. но есть проблема, я хочу фильтр такой, чтобы он сравнивал значение, которое он получает в поле ввода, а затем фильтровал данные в соответствии с компаратором (>=, =, <=) и заполнял таблицу. он этого не делает. Поэтому, если вы снова проверите мой html-код, о котором идет речь, который я обновил. Я делаю свою функцию сравнения, как фильтр поиска .

Andy Lanng

попробуйте новую скрипку: https://jsfiddle.net/bxrwnb7z/1/
Дайте мне знать, если это сработает для вас

[no name]

не удалось открыть ссылку jsfiddle

Andy Lanng

упс-исправил
https://jsfiddle.net/bxrwnb7z/1/

Andy Lanng

PS: чтобы добавить код, вы можете обновить вопрос. Просто, Пожалуйста, добавьте Примечание "обновление" к вашим изменениям ^_^

[no name]

Это работает, сэр. Теперь то, что происходит здесь, заключается в том, что он не сбрасывается обратно и не фильтруется снова. Я имею в виду, если есть 1,2,3,4,5,6,7 itemNum. теперь, если сначала выбрать itemNum >=5, он возвращает 5,6,7. но когда я очищаю свой txtbox и ставлю <=3, он не работает в этом сценарии.

Andy Lanng

Он не сбрасывает фильтр, потому что вы каждый раз стираете исходный список. Проверь мою скрипку. Посмотрите, как я это делаю.
1: возьмите копию первого набора (allProducts) - никогда не меняйте первый набор.
2: Используйте второй набор (продукты) для создания нового набора (newArray)
3: Измените второй набор (продукты), чтобы он указывал на новый набор вместо исходного

[no name]

Да, сэр, это работает в вашем коде. но я этого не делаю, но я не получил ни малейшего представления о том, как это реализовать в моем коде. Поскольку я получаю коллекцию JsonData и храню их в объекте $scope.products.
Итак,как мне скопировать набор и прикрепить их обратно к фильтру ng-repeat?

Я новичок в программировании, как вы могли видеть из моего кода. И это первый раз, когда я работаю над front end web Development.

Andy Lanng

В моем примере есть функция, которая называется getTestProducts(12). Что населяет $scope.allProducts Это никогда не используется ни для чего другого, кроме как для обновления $scope.Products.
Если вы скопируете мой код и заполните его $scope.allProducts от вашего звонка ajax, тогда все будет работать как у меня

[no name]

Я сделал то же самое. он работает, но никогда не заполняет данные при загрузке страницы. Он начинает показывать данные только при использовании фильтра.

Andy Lanng

Убедитесь, что вы заполнили $scope.Продукты, как только у вас есть данные.

Возможно, ваше угловое приложение не запускает обновление. Есть способы вызвать его

[no name]

Я обнаружил свою ошибку. Я назначал новый объект коллекции внутри функции onChange.

Большое вам спасибо, сэр.

[no name]

Сэр, как мне сравнить даты подобным образом? Я попробовал, но ничего не вышло. Мои даты сохраняются в БД в формате 07-14-2017.

Andy Lanng

Я думаю, что лучший способ-это использовать их как даты, т. е. let d = new Date(p.date).

Я бы использовал класс и конструктор для форматирования объекта после его десериализации. Посмотрите на новый jsFiddle, чтобы узнать, как это сделать: jsFiddle.

Обратите внимание, как я преобразую свой тест в строку. Это просто для имитации данных, которые вы получите из своего json. Я преобразую его в тип даты в конструкторе, как вы и должны

[no name]

Сэр, именно здесь я получаю свою коллекцию объектов в виде json.
$http(
{
метод: "пост",
url: "ProdForm. aspx/GetProduct",
данные: {},
contentType: "application/json",
тип данных: "json"

}). затем(функция (ответ) {

$масштаб.Продукции = формат JSON.разбора(ответ.данных.д);
отладчик;
});

теперь, как мне перебрать их и привести к дате, как вы показали в JsFiddle. Не могли бы вы показать мне мой код, пожалуйста.

Andy Lanng

О-О-О, вы используете еще одну классную функцию массива под названием "Карта".
подобный этому:
$масштаб.Продукции = формат JSON.разбора(ответ.данных.д).карта(д=&ГТ;новый ProductClass(д));
Как это круто!

[no name]

При этом я допустил ошибку. Я думаю, что это слишком продвинуто для моего уровня. : D Спасибо, что показали мне другой мир front end сценариев. Я буду учиться и постараюсь найти ресурс. но теперь... Я просто хочу отфильтровать коллекцию по переданному компаратору ite '>= ' и т. д. и введенному значению даты. Как и в случае с целым числом.