現在、サインアップ ページでユーザーにデータを入力してもらっています。これには、ユーザーに「プラン タイプ」を入力してもらうことが含まれます。このユーザー データを Firebase に保存します。
ユーザーが前の入力ページを送信した後の次のページで、AngularJS を使用してユーザーの「プラン タイプ」 (コードでは customFilter) によってフィルター処理されたすべてのプランを表示する出力ページにユーザーを誘導します。そのため、ページが読み込まれるとすぐに、firebase からユーザーのプラン タイプを呼び出して、それを customFilter が使用する初期フィルターにできるようにしたいと考えています。
Firebase から「プラン タイプ」を取得するまで、Angular フィルターを待機させるにはどうすればよいですか?例を教えていただければ幸いです。
これに答えやすくするために、以下のコードを追加しました**
<body ng-app="tipOutput" ng-controller="Tips">
<div ng-controller="MainCtrl">
// Custom filter that I want to customize based on user data
<span class="select">
<select style="width:100%" ng-model="filterItem.plan" ng-options="item.name for item in filterOptions.plans"></select>
</span>
// Table using ng-repeat and above filter
<table>
<tbody>
<tr ng-repeat="tip in tips | filter:customFilter">
<td style="vertical-align:top"><span><strong>{{tip.planName}}</strong></span><span ng-show="tip.planDetail">Plan Detail: {{tip.planDetail}}</span></td>
</tr>
</tbody>
</table>
</div>
</body>
Angular アプリのコードはこちら
angular.module('tipOutput', ['firebase', 'filters'])
.controller('Tips', ['$scope', 'angularFire',
function ($scope, angularFire) {
var ref = new Firebase('https://sitename.firebaseio.com/tips');
angularFire(ref, $scope, "tips");
}])
.controller('MainCtrl', function($scope) {
//Contains the filter options
$scope.filterOptions = {
plans: [
{id : 2, name : 'All Plans', type: 'all' },
{id : 3, name : 'Plan Type 1', type: 'plan-type-1' },
{id : 4, name : 'Plan Type 2', type: 'plan-type-2' },
{id : 5, name : 'Plan Type 3', type: 'plan-type-3' },
{id : 6, name : 'Plan Type 4', type: 'plan-type-4' },
{id : 7, name : 'Plan Type 5', type: 'plan-type-5' },
{id : 8, name : 'Plan Type 6', type: 'plan-type-6' }
]
};
// Here's where the initial value of the filter is set. Currently, it's not dynamic, but I
// want it to be based off a variable that comes in asynchronously (i.e. likely after this
// code would otherwise run)
$scope.filterItem = {
plan: $scope.filterOptions.plans[0]
}
//Custom filter - filter based on the plan type selected
$scope.customFilter = function (tip) {
if (tip.servicesReceived === $scope.filterItem.plan.type) {
return true;
} else if ($scope.filterItem.plan.type === 'all') {
return true;
} else {
return false;
}
};
})