Hello , I’m trying to compare two objects data-json in IONIC 1.
Here’s what I have in mind for the compare results. After the person selects his choices and hits “submit”…he’ll get them all lined up next to one another using the exact same layout as “power-sections-details.html” forEach with ability to swipe left/right to view them .
Any idea how can I implement that .
your help would be appreciated
compareModels.html
<ion-view title="Compare Models" id="page10" class=" ">
<ion-content padding="true" class="has-header" >
<div class="spacer" style="width: 285px; height: 21px;"></div>
<p id="compareModels-markdown4" style="color:#797979;font-size:16px;text-align:center;" class=" ">Select two or more models to compare their specifications.</p>
<form id="compareModels-form3" class="list ">
<label class="item item-input" >
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Filter" >
</label>
<ion-checkbox>BT168562.3</ion-checkbox>
<ion-checkbox>BT168565.0</ion-checkbox>
<ion-checkbox>BT212566.0</ion-checkbox>
<ion-checkbox>BT287563.5</ion-checkbox>
<ion-checkbox>BT287564.7</ion-checkbox>
<a ui-sref="tabsController.compareModels2" id="compareModels-button8" class=" button button-royal button-block ">Compare Selected</a>
</form>
</ion-content>
</ion-view>
power-sections-detail.html
<ion-view title="Product Detail" id="ps-detail" class=" ">
<ion-content ng-repeat="model in models | filter: { id: 10 }:true" >
<div class="header" style="">
<div class="icon-holder">
<img class="lobe" src="img/lobe{{model.number_of_lobes|slashtodash}}-lite.png">
</div>
<div class="header-text">
<h3 style="color:white;font-weight: bold;">{{model.model_number}} id{{model.id}}</h3>
</div>
</div>{{whichModel}}
<div class="padding10">
<form id="productDetail-form12" class="list ">
<ion-toggle toggle-class="toggle-energized" id="productDetail-toggle3" class=" ">Metric</ion-toggle>
</form>
<div id="productDetail-button-bar5" class=" button-bar ">
<button ng-click="window.plugins.socialSharing.share('{{model.model_name}}');" class=" button button-stable button-block icon-left ion-android-share ">Share</button>
<a href="javascript:;" onclick="window.open('http://www.basintek.com/assets/pdf/models/{{model.model_number}}.pdf', '_system', 'location=yes'); return false;" id="productDetail-button10" class=" button button-stable button-block icon-left ion-chevron-down ">Download</a>
</div>
<div ng-include="'partials/power-sections/performance-chart.html'"></div>
<div ng-include="'partials/power-sections/rotor-spec-table.html'"></div>
<div ng-include="'partials/power-sections/stator-spec-table.html'"></div>
<div ng-include="'partials/power-sections/fits-table.html'"></div>
<div ng-include="'partials/power-sections/fits-hpe-table.html'"></div>
<div ng-include="'partials/power-sections/perf-spec-table.html'"></div>
<div ng-include="'partials/power-sections/perf-detail-table.html'"></div>
<a ui-sref="tabsController.modelFitTempGuide" id="productDetail-button11" class=" button button-royal button-block ">View Fit / Temp for This Model</a>
<div class="spacer" style="width: 100%; height: 38px;"></div>
</div>
</ion-content>
</ion-view>
Controllers
.controller('compareModelsCtrl', function($scope,$state) {
})
.controller('compareModels2Ctrl', function($scope) {
})
/* BASINTEK MODELS */
.controller('BasintekModelsController',['$scope','$http', '$state' ,
function($scope, $http, $state) {
$http.get('js/data.json').success(function(data){
$scope.models = data;
$scope.whichmodel = $state.params.modelId;
//}
});