@FreeAero

Как настроить фильтр ng-repeat?

Здравствуйте, недавно начал осваивать AngularJs, и не могу решить одну задачу, при нажатии на галочку производится фильтр, а если галочку снять то все пропадает, а фильтр должен возвращаться обратно.
  • Вопрос задан
  • 194 просмотра
Пригласить эксперта
Ответы на вопрос 1
copal
@copal
𝄞 ...оооо baby
Вот так нужно?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
	<style type="text/css">
		body {
			background-color: #232323;
		}
	</style>
	<script type="text/javascript">
		var app = angular.module('CheckBoxApp', []);

		app.controller('FilterController', ['$scope', function($scope){
			$scope.filters = {id: 2};

			$scope.allFilms = [
				{ name: 'title 1', genre: 'horror', date: 2014 },
				{ name: 'title 2', genre: 'comedy', date: 2015 },
				{ name: 'title 3', genre: 'horror', date: 2014 },
				{ name: 'title 4', genre: 'comedy', date: 2014 },
				{ name: 'title 5', genre: 'horror', date: 2015 }
			];

			$scope.checkboxDataForFilter = {
				range: '',
				date: ''
			};

		}]);

	</script>
</head>
<body>
	<div ng-app="CheckBoxApp">
		<div ng-controller="FilterController">

			<label> all:
				<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="''"/>
			</label>
			<label> horro: 
				<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'horror'"/>
			</label>
			<label> comedy:
				<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'comedy'"/>
			</label>
			
			<br />

			<label> all:
				<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="''"/>
			</label>
			<label> 2014: 
				<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2014"/>
			</label>
			<label> 2015:
				<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2015"/>
			</label>

			<table>
		            <tr ng-repeat="item in allFilms | filter: { date: checkboxDataForFilter.date, genre: checkboxDataForFilter.genre }">
		                <td>Name: {{ item.name }},</td>
		                <td>Genre: {{ item.genre }},</td>
		                <td>Release Date: {{ item.date }}</td>
		            </tr>
			</table>
		</div>
	</div>
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы