I'm trying to build a cordova app. In on of the functions, I wanted to add a dropdown select option that users can select and can get stored in order to be emailed as a request later. I added the select option in an options.html page and I wish to populate the selected option in order.html page. What would be the best way to go about this?
Here is my current options.html, which users optionsController:
<md-card ng-repeat="item in items.results | filter:true">
<img ng-src="{{items.img}}"
class="md-card-image"
alt="">
<md-card-content class="content">
<h2 class="md-title"><div ng-bind-html="item.name"></div></h2>
<h4>{{ item.price | currency }}</h4>
<h4>Qty {{ item.qty }}</h4>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">Select Your Side</h2>
<md-divider></md-divider>
<md-list-item layout="row">
<md-select aria-label="side set" class="md-accent" ng-model="item.type">
<md-option ng-value="side.name" ng-repeat="side in item.sides">{{ side.name }}</md-option>
</md-select>
</md-list-item>
</md-list>
</md-card-content>
<md-action-bar layout="row"
layout-align="end center">
<md-button class="md-fab md-accent fab"
aria-label="Remove From Cart"
ng-click="remove(item);showRemovedToast();"
ng-class="{active:item.active}">
<md-icon md-svg-src="img/icons/remove.svg"></md-icon>
</md-button>
</md-action-bar>
</md-card>
I'm retrieving JSON data under side.name, the data is as follows:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope',
function MyCtrl($scope) {
$scope.items = {
"results": [{
"active": false,
"desc": "With arugula, smoked almonds \u0026 chipotle vinaigrette",
"img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Watermelon-Quinoa-Jimaca-Salad.jpg",
"name": "Watermelon Quinoa Jicama Salad (\u003cspan style=\"color: lightblue;\"\u003eVE\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e, \u003cspan style=\"color: yellow;\"\u003eDF\u003c/span\u003e)",
"price": 14,
"sides": [{
"active": false,
"name": "Soup"
}, {
"active": false,
"name": "Salad"
}, {
"active": false,
"name": "Fries"
}],
}, {
"active": false,
"desc": "Buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto \u0026 balsamic drizzle",
"img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Mediterranean-Salad.jpg",
"name": "Mediterranean Salad (\u003cspan style=\"color: lightgreen;\"\u003eV\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e)",
"price": 15,
"sides": [{
"active": false,
"name": "Soup"
}, {
"active": false,
"name": "Salad"
}, {
"active": false,
"name": "Fries"
}],
}]
};
}
]);
My order.html is as follows, which uses orderController:
<md-card>
<md-card-content>
<h3 class="md-subhead" align="center">Review And Submit Order</h3>
<md-divider></md-divider>
<md-list ng-repeat="item in items.results | filter:true">
<md-list-item layout="row">
<h3><div ng-bind-html="item.name"></div> Qty:{{item.qty}}</h3>
<span flex></span>
<h3>{{ item.price | currency }}</h3>
</md-list-item>
<md-list-item layout="row">
<div id="side"></div>
</md-list-item>
</md-list>
<md-divider></md-divider>
<md-list>
<md-list-item layout="row">
<h3 class="md-subhead">Order Total:</h3>
<span flex></span>
<h3>{{ total(items.results) | currency }}</h3>
</md-list-item>
</md-list>
</md-card-content>
</md-card>
<md-card ng-if="(items.results | filter : {active: true}).length > 0">
<md-card-content layout-padding>
<form name="order">
<md-input-container flex>
<label>Name</label>
<input ng-model="name">
</md-input-container>
<md-input-container flex>
<label>Phone</label>
<input ng-model="phone">
</md-input-container>
<md-input-container flex>
<label>Address</label>
<input ng-model="address">
</md-input-container>
<md-input-container flex>
<label>Email</label>
<input ng-model="email">
</md-input-container>
<md-input-container flex>
<label>Special Requests</label>
<textarea ng-model="requests"
columns="1"
md-maxlength="150"></textarea>
</md-input-container>
</form>
</md-card-content>
<md-card-content layout="row"
layout-align="end center">
<md-button class="md-raised md-primary"
ng-controller="EmailController"
ng-click=sendMail()>
Place Order
</md-button>
</md-card-content>
</md-card>
I wish to populate the selected Side in the div 'side' - how do I go about this? I tried localstorage, but not sure how to store and populate on a different page. Any help would be appreciated.
Method 1 - Using a service
You create a service specialized in passing data among controllers/directives or other services.
Method 2 - Using events
Broadcast/emit an event with the data you need which you can later listen in every part of your application.
Method 3 - Passing data as route parameter
If you are using the angular router or ui-router (or probably any other router) you can pass data as a route paramater, which you can listen later in the controller attached to that route.
So, you can think of all this 3 methods and pick-up the one more suitable for you. In this case, you should go with the event method since you want to pass data created by an UI interaction.
Pass values to another page, Easy way :
how to pass more than one value to next page in angularjs
using broadcast:
inside controller 1
$scope.$root.$broadcast("triggerEvent", { pass_this_value: yourValue});
this is the Event listner
$scope.$on("triggerEvent", function (event, args) {
//do what u want to
});
Related
Can anyone give any suggestions for adding an Expand/Collapse view shown here.
I'd like to use Angular material with AngularJS only and not be dependant on Bootstrap etc however I can't find anything suitable in the AngularMaterial docs.
Thanks
One way is to use 2 consecutive md-list-item.
Here is the HTML Code.
<md-list flex>
<md-list-item ng-click="toggle.list1 = !toggle.list1">
<md-icon>explore</md-icon>
<span flex>Item List 1</span>
<md-icon ng-show="!toggle.list1">expand_more</md-icon>
<md-icon ng-show="toggle.list1">expand_less</md-icon>
</md-list-item>
<md-list-item ng-repeat="item in data" ng-show="toggle.list1">
<span flex-offset="5">{{item}}</span>
</md-list-item>
<md-list-item ng-click="toggle.list2 = !toggle.list2">
<md-icon>explore</md-icon>
<span flex>Item List 2</span>
<md-icon ng-show="!toggle.list2">expand_more</md-icon>
<md-icon ng-show="toggle.list2">expand_less</md-icon>
</md-list-item>
<md-list-item ng-repeat="item in data" ng-show="toggle.list2">
<span flex-offset="5">{{item}}</span>
</md-list-item>
</md-list>
JS Code:
angular.module('myApp',['ngMaterial'])
.controller('TempController', function($scope){
$scope.data = [ "Item 1", "Item 2", "Item 3", "Item 4"]
$scope.toggle = {};
});;
Here is the working Codepen.
This doesn't seem to use bootstrap.
https://github.com/LukaszWatroba/v-accordion
this should be possible code to make your own accordion with material
http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ
Here is my scenario
When i select any one item in list(<md-list-item>) an active class should be appended for the particular item.
When iam trying to do it, active class getting appended for all the items. Please help me if anyone knows the solution. Iam new to material design.
<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId(review.empId)">
<img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
<div class="md-list-item-text" layout="column">
<h3>
{{review.name }}
</h3>
<span class="review-subtext">{{review.info}}</span >
<p class="review-status">{{review.status}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
Here's one way of doing it - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-list>
<md-list-item class="md-3-line" ng-repeat="review in oReviews" ng-click="fnReviewEmployeeId($index)" ng-class="{selectedIndex: selectedIndex===$index}">
<img ng-src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="md-avatar">
<div class="md-list-item-text" layout="column">
<h3>
{{review.name }}
</h3>
<span class="review-subtext">{{review.info}}</span >
<p class="review-status">{{review.status}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
</md-list>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.selectedIndex = null;
$scope.oReviews = [
{name: "Cheese", info: "Dairy", status: "Delicious"},
{name: "Beef", info: "Cow", status: "Versatile"},
{name: "Bread", info: "Yeast", status: "Everywhere"},
];
$scope.fnReviewEmployeeId = function (index) {
if ($scope.selectedIndex === null) {
$scope.selectedIndex = index;
}
else if ($scope.selectedIndex === index) {
$scope.selectedIndex = null;
}
else {
$scope.selectedIndex = index;
}
}
});
CSS
.selectedIndex {
background: yellow;
}
Can you add a boolean type property to the oReviews object? You could update that property when they click on it and then you can use ngClass to add the active class
I think Material Design handles selection differently, under List in the Docs, the example shows using a checkbox to indicate selection based on ng-model:
//I added the ng-click
<md-list-item ng-repeat="topping in toppings"
ng-click="topping.wanted = !topping.wanted">
<p> {{ topping.name }} </p>
<md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
</md-list-item>
Look for Section List Controls: https://material.angularjs.org/latest/demo/list
I'm working on using JSON to keep a list of media themes. When trying to load it, however, I get a blank section where they should be on the page. I get no errors on my console, implying that something is missing from my HTML or my JavaScript. Any pointers are much appreciated.
The HTML:
<div class="themeContainer">
<div ng-repeat="theme in themes" class="repeated-item" flex>
<img ng-src="{{themes.thumb}}" class="md-avatar" />
<h4>{{themes.title}}</h4>
<h5>{{themes.desc}}</h5>
</div>
</div>
The Angular script:
'use strict';
angular.module('careApp.pTheme', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/pTheme', {
templateUrl: './templates/pTheme.html',
controller: 'pThemeCtrl'
});
}])
.controller('pThemeCtrl', function($scope, $http) {
$http.get('./templates/scripts/themes.json').then(function(res){
$scope.themes = res.data;
});
});
And finally, the JSON in question:
[
{"thumb": "./templates/scripts/thumbs/01.jpg", "title": "Mt. Hood Sunset", "desc": "A relaxing view of Mt. Hood, Oregon."},
{"thumb": "./templates/scripts/thumbs/02.jpg", "title": "Misty Rainforest", "desc": "Tap, Pay 1 life, Sacrifice Misty Rainforest: search your library for a Forest or Island card and put it onto the battlefield. Then shuffle your library. "},
{"thumb": "./templates/scripts/thumbs/03.jpg", "title": "Clouds", "desc": "Blue skies and white clouds."}
]
I am not sure if this is the issue , but this is atleast one of the problems
<div ng-repeat="theme in themes" class="repeated-item" flex>
<img ng-src="{{themes.thumb}}" class="md-avatar" />
<h4>{{themes.title}}</h4>
<h5>{{themes.desc}}</h5>
</div>
should be
<div ng-repeat="theme in themes" class="repeated-item" flex>
<img ng-src="{{theme.thumb}}" class="md-avatar" />
<h4>{{theme.title}}</h4>
<h5>{{theme.desc}}</h5>
</div>
You are using themes instead of theme inside ng-repeat
Your html elements inside ng-repeat should point to 'theme' instead of 'themes'
<div class="themeContainer">
<div ng-repeat="theme in themes" class="repeated-item" flex>
<img ng-src="{{theme.thumb}}" class="md-avatar" />
<h4>{{theme.title}}</h4>
<h5>{{theme.desc}}</h5>
</div>
</div>
I have some issues with select on angular Js, I searched a lot and found some solutions but not working.
I have a Json Structured like that generated from my service.php
[
{
"Name": "Name1",
"Variante": [
{
"Prix": "79.00",
"Name": "20 Piéces"
}
],
"Description": "",
"main_image": "images/products/DSC_0192.jpg"
},
{
"Name": "NAME2",
"Variante": [
{
"Prix": "39.00",
"Name": "250g"
},
{
"Prix": "60.00",
"Name": "500g"
}
],
"Description": "",
"main_image": "images/products/DSC_0125.jpg"
}
]
Here is my controller.js
.controller('productsCtrl', function($scope, $http, $stateParams) {
$http.get('service.php')
.success(function (response) {
$scope.products = response;
});
});
Here is my products.html
<ion-view view-title="Products">
<ion-content>
<ion-list>
<ion-item style="background-image: url({{product.main_image}})"
ng-repeat="product in products" class="productListItem">
<h2 class="h2Name">{{product.Name}}</h2>
<button class="button button-balanced button-right">
<i class="icon ion-ios-cart"></i>
</button>
<select class="Variantes"
ng-if="product.Variante.length > 1"
ng-model="selectedItem"
ng-options="variant.Name for variant in product.Variante">
</select>
<h2 class="Variantes" ng-if="product.Variante.length == 1">
{{product.Variante[0].Name}}
</h2>
<h2 class="h2Price" ng-if="product.Variante.length > 1">
{{selectedItem.Prix}}
</h2>
<h2 class="h2Price" ng-if="product.Variante.length == 1">
{{product.Variante[0].Prix}}
</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
If I have more than one VarianteI want to be able to change the price (Prix) value when I change the select box. But it doesn't work.
Any help needed !!
Thanks
The issue you have is due to the ng-if. It creates a separate scope, use ng-show instead cause it uses the same scope and your code should work perfectly.
Using ng-show would work but you could also use ng-if if you're taking care of the dot rule for ng-model.
If you would add your selectedItem to the product object your markup with ng-if will work as expected. Your ng-model for the select would be like ng-model="product.selectedItem".
Please have a look at the demo below or in this jsfiddle.
var jsonData = [
{
"Name": "Name1",
"Variante": [
{
"Prix": "79.00",
"Name": "20 Piéces"
}
],
"Description": "",
"main_image": "images/products/DSC_0192.jpg"
},
{
"Name": "NAME2",
"Variante": [
{
"Prix": "39.00",
"Name": "250g"
},
{
"Prix": "60.00",
"Name": "500g"
}
],
"Description": "",
"main_image": "images/products/DSC_0125.jpg"
}
];
angular.module('demoApp', ['ionic'])
.controller('productsCtrl', function($scope, $http, $stateParams) {
$scope.product = {
selectedItem: {}
};
//$http.get('service.php')
//.success(function (response) {
//http just removed for the demo
$scope.products = jsonData;//response;
//});
});
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"/>
<ion-view ng-app="demoApp" ng-controller="productsCtrl" view-title="Products">
<ion-content>
<ion-list>
<ion-item style="background-image: url({{product.main_image}})"
ng-repeat="product in products" class="productListItem" ng-init="product.selectedItem = product.Variante[0]">
<h2 class="h2Name">{{product.Name}}</h2>
<button class="button button-balanced button-right">
<i class="icon ion-ios-cart"></i>
</button>
<select class="Variantes"
ng-if="product.Variante.length > 1"
ng-model="product.selectedItem"
ng-options="variant.Name for variant in product.Variante">
</select>
<h2 class="Variantes" ng-if="product.Variante.length == 1">
{{product.Variante[0].Name}}
</h2>
<h2 class="h2Price" ng-if="product.Variante.length > 1">
{{product.selectedItem.Prix | currency}}
</h2>
<h2 class="h2Price" ng-if="product.Variante.length == 1">
{{product.Variante[0].Prix | currency}}
</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I am working on a simple products filtering app using Ionic framework.
I have a list of products that I like to filter, and the AngularJS filter model works great except for this weird case: If I scroll down the list and filter most of the search query is missing.
https://apps.ionic.io/app/11bc2ed5
.factory('Recettes', function() {
// Might use a resource here that returns a JSON array
var data = [];
data.recettes = [];
data.produits = [
{
"index": 1,
"isActive": true,
"estAutorise": 0,
"name": "Howard Price",
"marque": "in"
},
{
"index": 2,
"isActive": true,
"estAutorise": 1,
"name": "Ingrid Saunders",
"marque": "amet"
},
...
<ion-view view-title="Dashboard">
<ion-header-bar class="item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Rechercher Un Produit" ng-model="searchText">
</label>
<button class="button button-clear" ng-click="searchText = undefined">
Annuler
</button>
</ion-header-bar>
<ion-content class="padding" >
<div class="list card" ng-repeat="produit in produits | filter:searchText | orderBy: index">
<div ng-switch on="{{produit.estAutorise}}">
<div class="item item-autorise" ng-switch-when="1">
<h2 class="title"><b>{{produit.marque}} </b>{{produit.name}}</h2>
<b class="balanced">Autorisé</b>
....
Here are few images that may describe the issue:
http://imgur.com/JDZXmQz,ucFdCX8,8VYXPAc
[Second Image], I'm typing the search while I am on top of the page, and every thing works fine.
[First Image][tird image] However, when I scroll down the list and insert the same query nothing shows.
I would really appreciate the help, Thank you!
Turned out the filter is working, the problem in the view when I scroll down then filter that part of the screen become empty and the view stay there even if there is nothing to show there. I hope there is calToTop function that shift automatically to the top whenever the query is refreshed.