Collection Repeat w/ $http and $resource Factory Example

Developer
Aaron K Saunders
Size
3,587 Kb
Views
32,384
  1. Collection Repeat w/ $http and $resource Factory Example Previews
  2. Collection Repeat w/ $http and $resource Factory Example HTML Codes
  3. Collection Repeat w/ $http and $resource Factory Example JS Codes

How do I make an collection repeat w/ $http and $resource factory example?

Using https://developer.nutritionix.com/ for nutrition information; showing how to access REST API with either $http or $resource with IonicFramework collection-repeat directive.. What is a collection repeat w/ $http and $resource factory example? How do you make a collection repeat w/ $http and $resource factory example? This script and codes were developed by Aaron K Saunders on 08 September 2022, Thursday.

Collection Repeat w/ $http and $resource Factory Example Previews
IQ Test

Collection Repeat w/ $http and $resource Factory Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collection Repeat w/ $http and $resource Factory Example</title>
</head>
<body> <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Collection Repeat w/ $http and $resource Factory Example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-resource.min.js"></script> </head> <body> <!-- Create the header bar --> <ion-nav-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <!-- this is where the content from application is displayed --> <ion-nav-view></ion-nav-view> <script id="home.html" type="text/ng-template"> <!-- add a search input field on top of page --> <div class="bar bar-subheader item-input-inset"> <label class="item-input-wrapper"> <input type="search" placeholder="Search text" ng-model="data.searchKey"/> </label> <!-- when user clicks, do a search --> <button class="button " ng-click ="doSearch()">Search </button> </div> <!-- The title of the ion-view will be shown on the navbar --> <ion-view view-title="Nutrition Search"> <ion-content class="has-subheader"> <!-- The content of the page --> <div class="list"> <!-- use collection-repeat to display content --> <div class="item my-item" collection-repeat="item in items" collection-item-width="'100%'" collection-item-height="getItemHeight(item, $index)" ng-style="{height: getItemHeight(item, $index)}"> {{item.fields.brand_name}} - {{item.fields.item_name}} - {{item.fields.nf_calories}} </div> </div> </ion-content> </ion-view> </script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Collection Repeat w/ $http and $resource Factory Example - Script Codes JS Codes

angular.module('ionicApp', ['ionic','ngResource']) .value('nutritionixConst', { 'appId' :'8abbcd8e', 'appKey' : '36e8d264537037ee7e832a41902ffe57'
})
/**
* sample using collection repeat and data is provided using $htp and $resource
*
* additional documentation on collection-repeat
* - https://ionicframework.com/docs/api/directive/collectionRepeat/
*/ .controller('HomeCtrl', function($scope, DataService,DataServiceHTTP, Weather) { $scope.data = {searchKey:''}; $scope.getItemHeight = function(item, index) { //Make evenly indexed items be 10px taller, for the sake of example return (index % 2) === 0 ? 50 : 60; }; /** * */ $scope.doSearch = function() { console.debug("Searching for: " + $scope.data.searchKey); if ( true ) { // use the $resource based service var promise = DataService.getAll( { 'term' : $scope.data.searchKey, 'results':'0:50', // <-- variable substitution //'fields':'item_name' <-- you can specify field params }).$promise; promise.then(function(_response) { console.debug(" The data " + JSON.stringify(_response)); $scope.items = _response.hits; }); } else { // use the $http based service var promise = DataServiceHTTP.getAll($scope.data.searchKey); promise.then(function(_response) { console.debug(" The data " + JSON.stringify(_response.data)); $scope.items = _response.data.hits; }); } };
})
/**
*
*/ .factory('DataService', function( $resource, nutritionixConst){ var aSearchObject = $resource('https://api.nutritionix.com/v1_1/search/:term',{term: '@term'},{ getAll : { method : 'get', //isArray : true, params : { results : ':results', appId : nutritionixConst.appId, appKey :nutritionixConst.appKey, // brand_id:'513fbc1283aa2dc80c00001f', fields : ':fields', } } }); return { /** * we can specify the params, the query string and the default fields * to turn in the query along with the result size */ getAll : function(_params) { var defaultFields = 'brand_id,item_name,item_id,brand_name,nf_calories,nf_total_fat'; if (!_params.fields) { _params.fields = defaultFields; } return aSearchObject.getAll(_params); } }
})
/**
*
*/ .factory('DataServiceHTTP', function( $http, nutritionixConst){ return { getAll : function(_key) { return $http.get('https://api.nutritionix.com/v1_1/search/' + _key,{ 'params' : { results : '0:50', appId : nutritionixConst.appId, appKey :nutritionixConst.appKey, // brand_id:'513fbc1283aa2dc80c00001f', fields : 'brand_id,item_name,item_id,brand_name,nf_calories,nf_total_fat' } }); } }
}) .factory('Weather', function($resource) { var API_PATH = 'http://api.openweathermap.org/data/2.5/weather'; var Weather = $resource(API_PATH); return { getWeather: function(weatherParams) { return Weather.get(weatherParams, function(successResult) { return successResult; }, function(errorResult) { console.log(errorResult); }); } }
}) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html', controller : 'HomeCtrl' }); $urlRouterProvider.otherwise("/");
});
Collection Repeat w/ $http and $resource Factory Example - Script Codes
Collection Repeat w/ $http and $resource Factory Example - Script Codes
Home Page Home
Developer Aaron K Saunders
Username aaronksaunders
Uploaded September 08, 2022
Rating 3.5
Size 3,587 Kb
Views 32,384
Do you need developer help for Collection Repeat w/ $http and $resource Factory Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron K Saunders (aaronksaunders) Script Codes
Name
A Pen by aaron k saunders
Nested ng-repeat in AngularJS with Checkboxes
Promise sample for Cross-Platform mobile application class
Using ui-router to control application flow
Angular2 Http Example
A Pen by aaron k saunders
Demo ui-router basic state change
A Pen by aaron k saunders
Firebase Login Example
Leaflet Map Directive in Ionic
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!