Question

我正在使用Angularjs构建我的第一个应用程序 - 我在codepen上编辑了下面的代码，尝试从googlesheet中的json文件中完成项目的搜索/过滤。

到目前为止它正在运作但是我遇到了两个问题，我希望得到一些建议。

过滤下拉过滤器中的唯一选项。我试图整合一些我在网上找到的不同版本的东西，但我遇到了一个deadend。
我还想对结果进行分页。

我真的很感激使用独特的文件管理器或ng-options对第一个元素提供一些帮助 - 并且可能会对如何将第二个控制器应用于代码以启用分页提供一些指导。

＆＃13;

var app = angular.module('myApp', []);
//
app.controller('SuperCtrl', function($scope, $http) {
  
  
  $http.get("https://spreadsheets.google.com/feeds/list/1JrDA9x8F8BglGhb30wbbZ4FfmHJsb6CbaGKhb19hedc/1/public/values?alt=json")
    .success(function(response) {$scope.tools = response.feed.entry;
                                 
	

  });
  
  
});
 
//

＆＃13;

.row {
  width: 1200px;
}

.pimg {
  width:100%;
}

.product {
  background: #ccc;
  padding: 10px;
  width: 32%!important;
  margin: 8px;
}
.form-inline {
  width: 100%;
  background: #1c1c1c;
  text-align: center;
  padding:10px;
}

.form-inline input {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

＆＃13;

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Tools and Tips for 1:1</title>
    <meta name="generator" content="BBEdit 11.1" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
    .row {
        margin:auto;
    }
    </style>
 
</head>
<body ng-app="myApp" ng-controller="SuperCtrl">
 
<div class="container-fluid">
<h1>On the computer</h1>
    <div class="row">
        <div class=" ">
           <!-- <form class="form-inline">
            <input ng-model='search.content.$t' type="text" placeholder="Search our Database of products" autofocus>-->
        </div>
                  <div class=" ">
              <select  ng-model='search.gsx$brand.$t' name="cars">
                <option value="" selected>Select A Brand</option>
                <option value="all" selected>Any Brand</option>
                <option ng-repeat="entry in tools"  value="{{ entry.gsx$brand.$t }}" >{{ entry.gsx$brand.$t }}</option>

              </select>
              
              <select ng-model='search.gsx$rrp.$t' name="cars">
                <option value="" selected>Choose A Price</option>
                <option value="" selected>Any Price</option>
                <option ng-repeat="entry in tools"  value="{{ entry.gsx$rrp.$t }}" >{{ entry.gsx$rrp.$t }}</option>
              </select>
              
                
        </div>

     
    </div>
 <!--ng-show="search.gsx$brand.$t"-->
    <div class="row">
      <div  ng-repeat="entry in tools | filter: search | orderBy:'gsx$focus.$t'" class="col-md-3 product">
        <img class="pimg" ng-src="{{ entry.gsx$img.$t}}"></img>
         <h4><a href="{{ entry.gsx$url.$t }}">{{ entry.gsx$title.$t }} </a></h4>
         <div class="description">{{ entry.gsx$rrp.$t}}</div>
         {{ entry.gsx$saleprice.$t }} 
      </div>
    </div>
 </div>   
    
</body>
</html>

＆＃13;

http://codepen.io/tmkcreative/pen/XMypEL

Answer 1

请注意，unique过滤器不是Angular内置过滤器。过滤器由多个第三方库提供，例如angular-filer。

这是使用angular-filter的{{3}}。变化如下：

在HTML文件中，添加

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.15/angular-filter.min.js"></script>

在JS文件中，注入angular-filter

var app = angular.module('myApp', [ 'angular.filter' ]);

然后您可以按照以下过滤品牌

<option
  ng-repeat="entry in tools | unique:'gsx$brand.$t'"
  value="{{ entry.gsx$brand.$t }}" >
  {{ entry.gsx$brand.$t }}
</option>

Angularjs独特的选项列表ng-repeat或ng-options？

1 个答案: