【发布时间】：2017-04-04 01:49:10
【问题描述】：
我正在使用 Angularjs 构建我的第一个应用程序 - 我一直在 codepen 上编辑下面的代码，以尝试完成对来自 googlesheet 的 json 文件的项目的搜索/过滤。
到目前为止，它正在运行，但是我遇到了 2 个问题，我希望得到一些建议。
过滤下拉过滤器中的唯一选项。我试图整合我在网上找到的几个不同版本的东西，但我遇到了死胡同。
我还想对结果进行分页。
我非常感谢使用唯一文件管理器或 ng-options 对第一个元素提供一些帮助 - 并且可能对如何将第二个控制器应用于代码以启用分页进行一些指导。
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;
});
});
//.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;
}<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>【问题讨论】：
-
您的问题含糊不清。你有什么问题？你目前有什么？你想达到什么目标？
-
嗨 Hoa，是的，他们雄心勃勃，但我喜欢在学习时挑战自己。上面的codepen是我的起点。我可以创建多个下拉列表作为过滤器，第一步是过滤他们正在搜索的给定字段中的唯一值 - 但我正在努力让 UNIQUE 属性工作。我一直将它应用于以下 '' 但这种方法似乎不起作用。是否需要添加一些 JS 来获取唯一值？
-
理想情况下，我可以将相同的过滤器应用于多个选项下拉列表。
-
抱歉误读了雄心勃勃的模棱两可：D
标签： angularjs json google-sheets