1
私はAngularjsで最初のアプリケーションを作成しています。私はcodepenで以下のコードを編集して、Googleのファイルからjsonファイルの項目の検索/フィルタリングを行っています。Angularjs固有のオプションはng-repeatまたはng-optionsをリストしますか？
これまでのところ、私はいくつかのアドバイスが必要な2つの問題に取り組んでいます。
ドロップダウンフィルタで一意のオプションをフィルタリングします。私はオンラインで見つけたいくつかの異なるバージョンのものを統合しようとしましたが、私は枯渇しています。
また、結果を改ページしたいと思います。
私はユニークなファイラーや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
を次のように次にあなたがブランドをフィルタリングすることができ
angular-filterを注入しますあなたの質問はあいまいです。あなたの問題は何ですか？あなたは現在何を持っていますか？そして、あなたは何を達成したいのですか？ – Hoa
こんにちはホア、彼らは野心的ですが、私は学習するときに自分自身に挑戦するのが好きです。上のcodepenは私の出発点です。フィルタとして複数のドロップダウンを作成することができます。最初のステップは、検索しているフィールド内の固有の値をフィルタリングすることですが、UNIQUEプロパティを取得するのには苦労しています。私は、それを次の ' 'ですが、このアプローチはうまくいかないようです。ユニークな値を取得するためにJSを追加する必要がありますか？ – mcktj
理想的には、複数のオプションのドロップダウンに同じフィルタを適用することができます。 – mcktj