0
Я создал представление в Angular, которое показывает записи сделок. Записи сделок имеют разные атрибуты. Один из них - это код купона.Добавление фильтров по угловому окну
Что я пытаюсь сделать, это добавить 3 ссылки вверху страницы. Первая ссылка - All Deals second - это купонные коды, а третья - предложения.
Пользователь по умолчанию видит все сделки при загрузке страницы. Если пользователь нажимает на купонные коды, я хочу показать только сделки с купоном! = ''. Если пользователь нажимает «Сделки», я хочу показать только сделки с купоном-кодом == ''
Вот что я сделал до сих пор. Ниже код мой взгляд
<!DOCTYPE html>
<html lang="en-US" ng-app="deals">
<head>
<title>{{ $merchant_url_text }} AngularJS Coupons & Promo Codes</title>
<!-- Load Bootstrap CSS -->
<link href="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') ?>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">TRYSTIN</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>-->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-9">
<div ng-controller="dealsController" ng-init="init({{$merchant_url_text}})">
<input type="hidden" value="{{$merchant_url_text}}">
<h2>{{$merchant_url_text}} Promo Codes & Coupons</h2>
<ul class="nav nav-tabs">
<li role="presentation">
<a data-ng-click="setSelected(0)" href="#">
All Deals
</a>
</li>
<li role="presentation">
<a data-ng-click="setSelected(1)" href="#">
Coupon Codes
</a>
</li>
<li role="presentation">
<a data-ng-click="setSelected(2)" href="#">
Deals
</a>
</li>
</ul>
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Deal Text</th>
<th>Coupon Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="deal in deals ">
<td>@{{ deal.deal_id }}</td>
<td>@{{ deal.deal_text }}</td>
<td>@{{ deal.coupon_code }}</td>
</tr>
</tbody>
</table>
<!-- End of Table-to-load-the-data Part -->
</div>
</div>
</div>
</div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js') ?>"></script>
<script src="<?= asset('https://code.jquery.com/jquery-1.11.3.js') ?>"></script>
<script src="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/deals.js') ?>"></script>
</body>
код ниже мой код контроллера
app.value('deals', '[]');
app.controller('dealsController', function($scope, $http, API_URL, deals) {
$scope.init = function(merchant_url_text) {
$scope.merchant_url_text = merchant_url_text;
//console.log("Inside Init: " + $scope.merchant_url_text);
//retrieve deals listing from API
$http.get(API_URL + merchant_url_text)
.success(function(response) {
$scope.deals = response;
this.deals = $scope.deals;
});
}
$scope.setSelected = function (selection) {
if (selection == 1) {
var tempDeals = [];
//console.log("selected: " + 1);
angular.forEach(this.deals, function(deal){
//console.log(deal.coupon_code);
if(deal.coupon_code != '') {
count ++;
tempDeals.push(deal);
}
});
console.log("Found " + count + " deals with coupon codes");
$scope.deals = tempDeals;
} else if (selection == 2){
//console.log("selected: " + 2);
var tempDeals = [];
var count = 0;
//console.log("selected: " + 2);
angular.forEach(this.deals, function(deal){
//console.log(deal.coupon_code);
if(deal.coupon_code == '') {
count ++;
tempDeals.push(deal);
}
});
console.log("Found " + count + " deals without coupon codes");
$scope.deals = tempDeals;
} else {
$scope.deals = this.deals;
}
return false;
};
});
Я не смог заставить его работать. Это правильный способ показать некоторые сделки на основе щелчка фильтра, когда все сделки уже загружены или есть более простой способ сделать это.
Где это не работает? Вы получаете ошибки или просто ничего не показывает? Попробуйте зарегистрировать свой объект $ scope.deals. Кроме того, вам может понадобиться объект «master», а затем загрузить $ scope.deals с теми, которые вы хотите показать. Я предлагаю вам зарегистрировать ('console.log foo') все, что вы хотите проверить, чтобы вы могли видеть, работает ли фильтр так, как должен. – Puce