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？

回答

相關問題