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

我正在用Angularjs构建我的第一个应用程序 - 我一直在codepen上编辑下面的代码，尝试从Google表格中的json文件中搜索/过滤项目。Angularjs独特选项列表ng-repeat或ng-options？

到目前为止，它正在工作，但我遇到了两个问题，我想一些建议。

过滤下拉过滤器中的独特选项。我试图整合一些我在网上找到的不同版本的东西，但是我正在陷入死亡。
我也想分页结果。

我真的很感激有点用独特的过滤器或NG选项的第一个元素的帮助 - 也许在第二控制器是如何被应用到代码，以便分页有点转向的。

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; 
 
            
 
\t 
 

 
    }); 
 
    
 
    
 
}); 
 
    
 
//

.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>

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

来源

2017-04-04 mcktj

筛选品牌你的问题不明确。你有什么问题？你目前有什么？你想达到什么目的？ – Hoa

你好，是的，他们雄心勃勃，但我喜欢在学习时挑战自己。上面的codepen是我的出发点。我能够创建多个下拉列表作为过滤器，第一步将过滤他们正在搜索的给定字段中的唯一值 - 但我努力让UNIQUE属性工作。我一直将它应用于ng-repeat中的 {{entry.gsx $ rrp。$ t}}'，但这种方法似乎不起作用。我是否需要添加一些JS来获得唯一值？ – mcktj

理想情况下，我可以将相同的过滤器应用于多个选项下拉菜单。 – mcktj

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

这是a modified version of your CodePen其中angular-filter被使用。的变化如下：

在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>

来源

2017-04-05 08:11:09 Hoa

非常感谢 - 你好 - 我认为它不是内置过滤器的事实让我失望了！这是非常感谢顶级回应！ – mcktj

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

回答

相关问题