Question

我在Angular中创建了一个显示交易记录的视图。交易记录有各种各样的属性。其中一个是优惠券代码。

我要做的是在页面顶部添加3个链接。第一个链接是All Deals，第二个是优惠券代码，第三个是Deals。

默认情况下，用户会在页面加载时看到所有交易。如果用户点击优惠券代码，我只想显示优惠券代码！=＆＃39;＆＃39;。如果用户点击优惠，我只想显示优惠券代码==＆＃39;＆＃39;

这是我到目前为止所做的事情。以下代码是我的观点

<!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;
};


});

我无法让它发挥作用。这是在所有交易已经加载时基于过滤器点击显示某些交易的正确方法，还是有更简单的方法来执行此操作。

Answer 1

有时我发现使用较窄的结果查询服务器更容易。

你可以触发一个新的＆＃34; get＆＃34;来自您的服务器的具有特定查询参数的操作并执行正确的搜索（通常更容易执行数据库查询）并使用结果加载范围。

在角度视图上添加过滤器

1 个答案: