I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.
Here is my code:
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div> <div class="col left">
<a ng-href="#/tab/orderdetails?detail={{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
x.detail is the json object i want to pass to the newly opened page "orderdetails.html":
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
var obj = this.href.split('?')[1];
console.log(obj);
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
app.js:
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
I want to know how to parse and use the passed object in "orderdetails.html". Thanks.
You can add controllers to the views,
then declare a $scope.json_name = json value
to be able to use the variable the you angular template
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
this is a variable name: {{ name }}
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
then you can add the controller like this
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html",
controller: function ($scope) {
$scope.name = "this is a variable name";
}
}
}
})
you can refer to angular documentation
Related
I wanted to perform show and hide on my button click. I have the following code. I want to show or apply my css style(color:red) on my "maindiv" content on clicking of button "Click".
Again, if I click that Click button then it should hide or display it's normal content like earlier(i.e without any css style of red), like this it should come.
Getting error: TypeError: Cannot read property 'classList' of null
Fiddle.
html:
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
js:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
document.querySelector("maindiv").classList.add("maindivColor");
}
}]);
Try angularjs way.
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
//alert("testExpand is called to show");
$scope.applyCss = !$scope.applyCss;
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div ng-class="{'maindivColor':applyCss}"><p>Normal Content</p></div>
<div ng-show="applyCss" ng-class="{'maindivColor':applyCss}">
<p>
Test Content
</p>
</div>
<div>
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('surveyController', function($scope){
$scope.backgroundColor = 'yellow';
$scope.changeStyle = function(){
if ($scope.backgroundColor == 'red') {
$scope.backgroundColor = 'yellow';
}else{
$scope.backgroundColor = 'red';
}
}
});
</script>
</head>
<body ng-controller="surveyController" ng-app="myApp">
<div id="maindiv" ng-style="{background: backgroundColor}">
<p>Test Content</p>
</div>
<div id="mainContainer">
</div>
<button ng-click="changeStyle()">Change Style</button>
</body>
</html>
Just add #
document.querySelector("#maindiv").classList.toggle("maindivColor");
And use toggle instead of add
You should use angular way to dynamically add CSS class, It can be achieved using ngClass directive
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
Controller
$scope.testExpand = function(){
alert("testExpand is called to show");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
angular.module('app', []).
controller('MainController', ['$scope', function($scope) {
$scope.testExpand = function() {
console.log("testExpand is called to hide");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
}]);
.maindivColor {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
var myEl = angular.element( document.querySelector( '#maindiv' ) );
if(myEl.hasClass('maindivColor')){
myEl.removeClass('maindivColor');
}else{
myEl.addClass('maindivColor');
}
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>
Test Content
</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
The best advice here: use angular things to do job in angular.
The faster you become 'ok' with this, the better.
You can add a 'style' variable in the controller:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.style = {};
$scope.testExpand = function(){
alert("testExpand is called to show");
if ($scope.style.color)
$scope.style.color = red;
else delete $scope.style.color;
}
}]);
And then you simple modify your html this way:
<div ng-app="app">
<div ng-controller="MainController">
<div ng-style="style">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
You can use JQuery in the following way.
$(document).find('.yourButton').hide();
This is my first time using ui-router and I find difficulties in handling routing and reloading some states. I hope anyone can help me with this.
overview of my index.html
<html ng-app="resApp">
<head></head>
<body ng-controller="mainCtrl" ng-cloak>
<div ng-show="showCustomerContent">
<div id="page-wrapper">
<div ui-view="header"></div>
<div ui-view="slider" ng-show="displaySlider"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</div>
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
<div ui-view="jsincludes"></div>
</body>
</html>
routing.js
'use strict'
resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider, $urlRouterProvider, $httpProvider,$locationProvider) {
$urlRouterProvider
.when('/','/Home')
.when('/login','/Home')
.otherwise('/Home');
$stateProvider
.state("home",{
url:'/Home',
views:{
'jsincludes':{
templateUrl:'views/includes/jsincludes.html'
},
'header':{
templateUrl:'views/customer_part/header.html',
controller:'headerCtrl'
},
'slider':{
templateUrl:'views/customer_part/slider.html'
},
'footer':{
templateUrl:'views/customer_part/footer.html'
}
}
})
.state("home.aboutus",{
url:"/AboutUs",
views:{
'content#':{
templateUrl:'views/customer_views/aboutus.html',
controller:'aboutusCtrl'
}
}
})
$httpProvider.useApplyAsync(true);
}]);
controller.js
'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
$rootScope.displaySlider = true;
$scope.$on('$stateChangeSuccess',function(event, toState){
var url = $location.absUrl().split('/');
//console.log(url);
if(url.length > 6){
$rootScope.displaySlider = false;
}else{
$rootScope.displaySlider = true;
}
});
UserData.getSessVar().then(function(msg){
if(msg.data!="none"){
$rootScope.uid = msg.data["uid"];
$rootScope.fullname = msg.data["fullname"];
$rootScope.role = msg.data["role"];
$rootScope.Id = msg.data["Id"];
if($rootScope.role == "customer"){
$scope.showCustomerContent = true;
}else{
$scope.showAdminContent = true;
}
}else{
$rootScope.role = "none";
$scope.showCustomerContent = true;
}
});
}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
$scope.hideLoginBtn = false;
if($rootScope.uid!=undefined){
$scope.hideLoginBtn = true;
}
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
$scope.home = function(){
$state.go('home', {}, { reload: true });
}
$scope.aboutus = function(){
$state.go('home.aboutus',{},{reload:true});
}
}]);
resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
}]);
In my header.html I have this code
<li>
<a href="" title="Home" ng-click="home()">
Home
</a>
</li>
Whenever I click Home the index.html is displaying another copy of my header and slider. As you can see in the image the {{fullname}} scope was displayed and also the other ui-views. I tried doing the ui-sref="home" ui-sref-opts="{reload: true, notify: true}" and put it in my anchor tag but the result is the same. I need to reload the page because my slider is not displaying if I just do ui-sref="home". I also tried to use the ng-cloak but whenever I click the anchor tag it also display my raw code in angularjs. The displayed raw code disappear when the whole page was rendered. Can anyone help me with this?
Update
This error only appeared in mozilla firefox. My routing is perfectly fine in chrome
There is div tag closing issue on the below code
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
Change it as below
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
</div>
Also, I am not sure why are you keeping header, footer, and slider as a named ui-view while you can achieve the same using simple ng-include. Use routing only for redirection and hyperlinks.
Refer my plunker for how to do it
https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview
Ideally you should have another html file ex:- main.html and in main.html specify the ui-view. for ex:-
<div id="wrapper">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
I can't see to get go back transition to work.
I have this abstract view called main that holds this child views.
<div class="bar bar-header bar-stable">
<button class="button button-clear button-positive">Log out</button>
</div>
<div class="clearfix"></div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content style="padding-top: 45px">
<ion-nav-view name="categories"></ion-nav-view>
<ion-nav-view name="products"></ion-nav-view>
<ion-nav-view name="payments"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu expose-aside-when="large" style="padding-top: 45px">
<ion-view>
<ion-content>
<ul class="list has-header" id="itemLists">
</ul>
</ion-content>
</ion-view>
<div class="bar bar-subfooter auto-height" style="padding:0">
<ul class="list">
<li class="item">Total <span class="pull-right" id="total"></span></li>
</ul>
</div>
<div class="bar bar-footer">
<div class="text-center">
<div class="bar bar-footer bar-positive">
<div class="title">Pay</div>
</div>
</div>
</div>
</ion-side-menu>
</ion-side-menus>
This is my app.js that holds all routes.
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){
$ionicConfigProvider.views.transition('none');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url: '/',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'mainController',
abstract: true
})
.state('main.categories', {
url: '/categories',
views: {
'categories': {
templateUrl: 'templates/categories.html',
controller: 'categoriesController'
}
}
})
.state('main.products', {
url: '/products/:productId',
views: {
'products': {
templateUrl: 'templates/products.html',
controller: 'productsController'
}
}
})
.state('main.payments', {
url: '/payments',
views: {
'payments': {
templateUrl: 'templates/payments.html',
controller: 'paymentsController'
}
}
})
})
I have this state main.products which a child of the main abstract view.
When I click the pay button on the left-down corner, it takes me to the main.payments view.
This is the code for the main.payments view
<ion-view view-title='Payments'>
<ion-content>
<div class="row">
<div class="col col-25">
Cash
</div>
<div class="col col-25">
Credit Card
</div>
<div class="col col-25">
Discount
</div>
<div class="col col-25">
<button ng-click="cancel()" class="button button-large button-block button-assertive">Cancel</button>
</div>
</div>
<div class="row">
<div class="col col-25">
<button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
</div>
</div>
</ion-content>
Now when I press the go back button the URL in the page changes to the previous page but the view doesn't transition there, until I refresh the page.
This is my payment controller that handles the go back button transition.
.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){
$scope.cancel = function(){
$localStorage.total= '';
$state.go('main.categories');
$window.location.reload();
};
$scope.goBack = function(){
$ionicHistory.goBack();
}
})
Main.payments and main.products are adjacent views not child view, although main.payments.view is child of main.payments and main.payments is child of main
So you can't travel to adjacent state.
if you want to traverse you have to specifically mention the $state.go(STATE_NAME); or you can use ui-sref in button itself
Note: add "cache:false" to abstract view
Right side Bajra atta, Besan, Corn Flour .. are subcategories.
Index.html
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'></div>
<!-- Serach Area -->
<div class='col-md-5'>
<input style="margin-top:5px;" type="text" ng-model="SearchText" placeholder="Search for more than 10,000 products..." class='form-control' size="50">
</div>
<div class='col-md-1'></div>
<div class='col-md-2'>
<a id="top_login" href="#Login" style="position:absolute; margin-top:15px; color:#FFFCBA">
<strong>LOGIN </strong>
</a>
</div>
</div>
</div>
<div ng-controller="MainCtrl">
<div class='container'>
<div class='row'>
<div class='col-md-2 Name'>
<!-- Super Categories-->
</div>
<div class='col-md-7'> </div>
<div class='col-md-2'>
<!--SC Cart-->
</div>
<div class='col-md-1'></div>
</div>
</div>
<div id="middle" class='container'>
<div class='row'>
<div id="left" class="col-md-2">
<!-- categoris and sub categories -->
</div>
<div id="right" class="col-md-6">
<div ng-view></div>
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Footer -->
</div>
</body>
products.html
<div class='box' ng-repeat="product in ProductService.Products | filter:SearchText | filter:FilterExpr:true| orderBy:'ProductName'">
<!-- Display filtered Products -->
</div>
ProductsController
sampleApp.controller('ProductsController', function ($scope, $routeParams, $log, $rootScope, ProductService) {
$scope.SCId = $routeParams.SCId;
$scope.ChangeFilter = function() {
if ($routeParams.SCId) {
$scope.FilterExpr = {'SubCategoryID': $routeParams.SCId.toString()};
}
};
$scope.ChangeFilter();
});
config Code
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Login', {
templateUrl: 'templates/ShowLogin.html',
controller: 'LoginController'
}).
when('/ShoppingCart', {
templateUrl: 'templates/ShoppingCart.html',
controller: 'ShoppingCartController'
}).
when('/Products/:SCId', {
templateUrl: 'templates/Products.html',
controller: 'ProductsController'
}).
otherwise({
redirectTo: '/Products/38'
});
}]);
When user clicks on subcategory, products of that subcategory is listed.
As otherwise is redirectTo: '/Products/38' products of subcategory 38 is listing initially.
I'm facing the following problems:
when user start typing in search box, filter:SerachText is applied on displayed subcategory products. But at this moment i want filter:SerachText to be apply on all the products (Not only on selected subcategory products)
Filter is not applying, if we are in some other routed page say login page. I want as soon as user start typing in search Box products.html and productsController to be activate.
When user has inputted something in search Box, and clicks on sub category, not all the products of that subcategory is listing because filter:SerachText is applied here. In this case i dont want to apply filter:SerachText filter
Can please some one help me to fix all these issues. I've tried all the combinations and permutations, but no luck. I'm also Ok if any architecture change is required that can make the things better.
Have you ever tried to hoist the SearchText filter scope to $parent.SearchText??
I guess, a superior scope ($parent or $rootScope) in your filter could work.
BTW: It works for me, 'cause it seems that ng-include does a local scope for each HTML to render, even in the same page.
P.D: Sorry for my English, greetings from Venezuela :D
I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website.
Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.
So my question is if it is possible to "embed" a html page in a specific section of another page.
For example I could have my sidebar be "static" and load in a login.html file in a specific div.
And having one html file with all the pages would be very hard to maintain and organise.
Is that possible in some kind of way?
EDIT: As requesting, I'm adding the most relevant code I already have
<ion-side-menus>
<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<!-- Knop toggleSidebar -->
<button class="button button-icon" ng-click="triggerSidebar()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col" col-50>5 + 8 = </div>
<div class="col" col-25><input type="number" placeholder="13"></div>
<div class="col" col-25><button class="button button-small">Controleer</button></div>
</div>
</ion-content>
</ion-side-menu-content>
<!-- End Main page -->
<!-- Sidebar -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
</ion-side-menu>
<!-- End sidebar -->
What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file
You can solve it using angular UI-routing:
$stateProvider
.state("menu", {
url: "/menu",
abstract: true,
templateUrl: "views/menu.html"
})
.state('menu.combinedPage1', {
url: '/combinedPage1',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded1.html",
controller: "EmbeddedController1"
}
}
})
.state('menu.combinedPage2', {
url: '/combinedPage2',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded2.html",
controller: "EmbeddedController2"
}
}
})
Here "menu" is abstract state and contains embedded views that controlled by router.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="EmbeddedContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
You can do it by using frames :) with only html the following code will help
<html>
<head>
<title>Multiple Pages</title>
</head>
<FRAMESET cols="20%, 80%">
<FRAME SRC="sidebar.html">
<FRAME SRC="content.html">
</FRAMESET>
</html>
also you can do it with php like this
#side_bar{
background-color: red;
width: 200px;
height: 100%;
float: left;
}
<div id="side_bar">
<?php
include_once('sidebar.html');
?>
</div>
You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:
sidebarCode.php:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
The new page:
<!--Specific Did You Want-->
<div>
<?php include 'sidebarCode.php';?>
</div>
Inside <ion-side-menu-content> you can load scripts via the ui router.
So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !