Форум

evgeniy123 · #1 (**permalink**) 18.02.2015, 19:25

Может кто подскажет почему у меня не возвращается когда я использую фильтр для отображения. Сам фильтр отрабатывает правильно так как тестил

<div ng-hide="{{recoverymy|emailfilter}}" ng-click='recovery()' class="btn btn-lg btn-primary btn-block">Recovery </div>

JS:

app.filter('emailfilter', function () {
    return function (string, $scope) {

      var  result =false;
        if (/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(string))
        {
         // alert('proshel');
            result = true;
        }
        else {
          // alert('ne proshel');
               result = false;
        }

        return result;
    };
});

Ошибок никаких не выдает. Когда вставляю в

<div ng-hide="true"  ...

то все ок.

Может другим способом нужно действовать или тут что то не так ?

ksa · #2 (**permalink**) 18.02.2015, 22:09

Сообщение от evgeniy123

Может кто подскажет почему

Посмотри, что у тебя в итоге оказывается в значении

Сообщение от evgeniy123

{{recoverymy|emailfilter}}

Может оно и прояснится...

Начни с простого примера, потом усложняй... Так же поймешь что не так.

ksa · #3 (**permalink**) 19.02.2015, 14:07

Сообщение от evgeniy123

Сам фильтр отрабатывает правильно так как тестил

Эти фильтры вообще своеобразный механизм... Такй вот вариант

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var app = angular.module('app', [
	'appCtrl',
	'appFlt'
]);
angular.module('appCtrl', []).controller(
	'ctrl', 
	[
		'$scope',
		function($scope) {
			$scope.test='';
		}
	]
);
angular.module('appFlt', []).
	filter(
		'fltEmpty', 
		function() {
			return function(input) {
				return input=='';
			};
		}
	).
	filter(
		'fltCss', 
		function() {
			return function(input) {
				var val=(input=='')? 'block': 'none';
				return {display: val};
			};
		}
	);
</script>
</head>
<body ng-controller='ctrl'> 
<input type=text ng-model='test' />
<p ng-hide='{{test|fltEmpty}}'>Поле заполнено!</p>
<p ng-style='{{test|fltCss}}'>Поле пусто...</p>
<p>'{{test}}' отфильтрован как '{{test|fltEmpty}}'</p>
</body>
</html>

Хоть и меняется с каждым разом, но на внешнее представление никак не влияет.

ksa · #4 (**permalink**) 19.02.2015, 14:15

Сообщение от evgeniy123

Может другим способом нужно действовать

Вот тебе т.с. альтернативный способ

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var app = angular.module('app', [
	'appCtrl',
	'appFlt'
]);
angular.module('appCtrl', []).controller(
	'ctrl', 
	[
		'$scope',
		function($scope) {
			$scope.test='';
			$scope.style={};
			$scope.empty=function(){
				if ($scope.test=='') {
					$scope.style={display: 'block'};
				} else {
					$scope.style={display: 'none'};
				};
			};
		}
	]
);
angular.module('appFlt', []).
	filter(
		'fltEmpty', 
		function() {
			return function(input) {
				return input=='';
			};
		}
	);
</script>
</head>
<body ng-controller='ctrl'> 
<input type=text ng-model='test' ng-change='empty();' />
<p ng-hide='{{test|fltEmpty}}'>Поле заполнено!</p>
<p ng-style='style'>Поле пусто...</p>
<p>'{{test}}' отфильтрован как '{{test|fltEmpty}}'</p>
</body>
</html>

ksa · #5 (**permalink**) 19.02.2015, 14:29

Сообщение от evgeniy123

или тут что то не так ?

В ходе своего исследования я понял, что ты в корне не правильно понимал теорию и применение фильтра.

Вот тебе правильный пример использования директивы ngHide...

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var app = angular.module('app', [
	'appCtrl'
]);
angular.module('appCtrl', []).controller(
	'ctrl', 
	[
		'$scope',
		function($scope) {
			$scope.test='';
			$scope.style={};
			$scope.no=($scope.test=='')
			$scope.empty=function(){
				if ($scope.test=='') {
					$scope.no=true;
					$scope.style={display: 'block'};
				} else {
					$scope.no=false;
					$scope.style={display: 'none'};
				};
			};
		}
	]
);
</script>
</head>
<body ng-controller='ctrl'> 
<input type=text ng-model='test' ng-change='empty();' />
<p ng-hide='no'>Поле заполнено!</p>
<p ng-style='style'>Поле пусто...</p>
</body>
</html>

evgeniy123 · #6 (**permalink**) 20.02.2015, 22:28

Спасибо. Разобрался. Как понял фильтры нужны только что бы преобразовать данные но никак не для условий

Форум

Справочник

Discord чат

Курсы javascript