Расширения текстового фильтра

Здесь я пытаюсь расширить стандартный текстовый фильтр для выполнения запроса GET и передать значение для расширенного фильтра пользователя вошелРасширения текстового фильтра

имени

фильтра является «поиск»:

myapp.filter('search', function($filter){  
    console.log('search param'+$scope.search) 
    $http.get('http-hello2.html').success(function (data) { 
      return $filter; 
    });

Но сообщение об ошибке:

Error: [$http:badreq] http://errors.angularjs.org/1.4.9/$http/badreq?p0=undefined 
    at Error (native) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:6:416 
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:85:218) 
    at Function.c.$get.m.(anonymous function) [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:90:109) 
    at link (https://run.plnkr.co/rz2TWpQpyYaVbHXN/script.js:14:27) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:222 
    at ca (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:279) 
    at I (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:62:174) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:69:193 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:119:221 <status-viewer url="sourceUrl" class="ng-isolate-scope">

Как продлить стандартный AngularJS текстовый фильтр для вызова пользовательских функций и передать параметр в этот фильтр? Пользовательские функции должны выполняться до того, как вызывается стандартная логика фильтра.

plnnkr: https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview

ЦСИ:

goob.html : 
goob 

http-hello2.html 
2. http-hello2.html 

test.html : 
test 

index.html : 
<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body> 

    <div ng-controller="FetchCtrl"> 

<label>Filter: <input ng-model="search"></label> 


<div ng-repeat="sourceUrl in sourceUrls | filter:search"> 
    <status-viewer url="sourceUrl"> </status-viewer> 
</div> 
    </div> 


</body> 
</html> 

mytemplate.html : 

<!--<h1>{{url}}</h1>--> 
<div> 
    <p>{{model}}</p> 

</div> 

script.js : 
var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl) 

myapp.directive('statusViewer', function ($http , $interval) { 
      return { 
       restrict: 'E', 
       templateUrl: 'mytemplate.html', 
       scope: { 
        url: '=' 
       }, 
       link: function (scope, elem, attrs, ctrl) { 

        scope.isFinishedLoading = false; 

        $http.get(scope.url).success(function (data) { 
         scope.model = data; 
        }); 
       } 
      }; 
     }); 

myapp.filter('search', function($filter){  
    console.log('search param'+$scope.search) 
    $http.get('http-hello2.html').success(function (data) { 
      return $filter; 
    }); 

}); 

function FetchCtrl($scope, $http, $q , $parse) { 


$scope.sourceUrls = [ 
       'http-hello2.html', 
      ,'test.html' 
      ,'goob.html']; 



}

источник

2016-02-14 blue-sky

Я не очень понимаю, что вы имеете в виду ' Расширение текстового фильтра? вы хотели найти что-то в БД, когда пользователь вводит ввод? –

@PankajParkar Я не хочу изменять функциональность фильтра, просто вызвать запрос на получение и передать параметр в фильтр. –

, тогда вам не нужно переопределять функциональность фильтра. У вас может быть директива 'ng-change' на месте? и внутри события 'ng-change' действительно вызывают метод' $ http.get' .. но, честно говоря, я не понимаю, почему вы хотели получать шаблон каждый раз? –

Ошибка выходит, потому что изначально не имело никакого значения в $scope.search значения и URL прошло, как undefined, другая вещь вы пытались использовать $scope внутри фильтра, которые не могут быть доступны

Как я вижу, вы не хотите загружать какой-либо шаблон при изменении входного значения. И из вашего текущего подхода вы хотели загрузить шаблон из фильтра на основе ввода (если я его правильно понял). Но похоже, что вы ошибаетесь.

В основном фильтрация используется для выполнения некоторых манипуляций при привязке при отображении некоторого значения (например, при отображении нормального слова в верхнем регистре используется фильтр верхнего регистра). Здесь вы используете фильтр для загрузки шаблона на входе change (в основном, который запускает фильтр, но не из-за изменения ввода, он запускается в цикле дайджеста). Каждый раз, когда цикл дайджеста будет запущен, он сделает ajax для извлечения этого шаблона. Технически угловой фильтр не предназначен для того, что вы там делаете.

Расширение текстового фильтра оказывается неправильным, поскольку его не нужно расширять.

Лучше бы я сказал, что вы должны положить событие ng-change на поле ввода с некоторой функцией, которая будет запускать эту функцию при каждом изменении ввода. и это не повлияет на работу фильтра.Делая это изменяет это сделает шаблон вызова только при входе changed

Markup

<input ng-model="search" ng-change="change()" />

Код

$scope.change = function() { 
    //code here. 
};

источник

2016-02-14 11:15:59

@ сине-небо не стесняйтесь повышать, если это помогает. Спасибо;) –

Прежде всего, вам нужно впрыснуть $ HTTP Service в фильтрации, чтобы предотвратить ошибку, что у вас есть:

myapp.filter('search', function($filter, $http){

и второе, :

вы не должны делать

$http.get(scope.url)

не уверен, что scope.url уже установлен. Я бы предложил сделать запрос по условию;

if(scope.url){ 
    //$http.get(scope.url)... 
}

источник

2016-02-14 11:01:55

Расширения текстового фильтра

ответ

Смежные вопросы