I have a simple search and list setup. But only wish to display the product below if we get a match of the model number.
Is it a case of just switching or tweaking the ng-repeat? Ideally if a model number is not found a product model not found error would be displayed.
Here is the code and a Plunker:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-dark">
<h2 class="title">Product List</h1>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div>
<ion-content ng-controller="ListController" class="has-subheader">
<ion-list>
<ion-item ng-repeat="item in products | filter:query" class="item-thumbnail-left item-text-wrap">
<img src="img/{{item.products_image}}" alt="{{item.products_name}} Photo">
<h2>{{item.products_name}}</h2>
<h3>{{item.products_model}}</h3>
<p>{{item.products_price}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/products.json').success(function(data) {
$scope.products = data;
});
}]);
https://plnkr.co/edit/A8AhWZDBjjv8wUJjh69Y?p=preview
If you have to search based on Model number then try to write search box like
<input type="search" ng-model="query.products_model" placeholder="Search">
Related
I have searched throughout the entire web, but I cannot find anyone with an answer. I am setting up a simple front-end website using the original Angular, AngularJS. Unfortunately, I cannot determine why ng-view will not display any of my "partials" (other html pages). Can anyone lend me a second set of eyes and tell me what simple mistake I am making? Thank you in advance.
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
templateURL: 'partials/MainMenu.html',
controller: 'MainMenuCtrl'
}).
when('/reports', {
// Links to the HTML page
templateURL: "partials/Reports.html",
// Links to the controller in the controller file
controller: "ReportsCtrl"
}).
when('/StoreStatistics', {
templateURL: "partials/StoreStatistics.html",
controller: "StoreStatisticsCtrl"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<section ng-include="'partials/MainMenu'"></section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
<!-- This the MainMenu.html page -->
<!-- Main Menu -->
<div class="container is-fluid">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
<a class="button is-primary is-outlined" ng-href="/">Home</a>
<a class="button is-info is-outlined" href="#!/reports">Reports</a>
</div>
<!-- End of Main Menu -->
Nothing wrong with the syntax, just make sure the template url is correct
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
template: "<div>MENU</div>"
}).
when('/reports', {
// Links to the HTML page
template: "<div>REPORTS</div>"
}).
when('/StoreStatistics', {
template: "<div>STORE</div>"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
You have excess syntax.. remove /
Try this
<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>
I am starting an ionic project.It not works for me.I am doing a side menu for all views.i want a quick replay.in index page inside the ion-nav-view I can fill the content it also shows as output.but i want to show the contents in the menulayout.html
index page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="app/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
</body>
</html>
app.js
angular
.module('starter', ['ionic'])
.run([ '$ionicPlatform', function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
if (cordova.plugins.Keyboard.hideKeyboardAccessoryBar) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.backButton.previousTitleText(false).text('');
$stateProvider
.state('app',{
abstract:true,
url: "/app",
templateUrl:"app/layout/menulayout.html"
})
.state('app.home', {
url: "/home",
views:{
'mainContent':{
templateUrl: 'app/ast/home.html'
}
}
})
.state('app.login', {
url: "/login",
views:{
'mainContent':{
templateUrl: 'app/ast/login.html'
}
}
});
$urlRouterProvider.otherwise('/home');
});
menulayout.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-dark" align-title='center'>
<ion-nav-title align-title='center'>Home</ion-nav-title>
<ion-nav-back-button class="button-icon button-clear">
<i class="ion-arrow-left-c energized"></i>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1>Home</h1>
</header>
<ion-content class="has-header highlight sidemenu">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.home">
Home
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
ionic serve shows a white screen also no errors shows in the console.
The problem could a common one with grunt-concurrent#1.0.1. Try installing version 1.0.0 i.e.:
npm install -g grunt-concurrent#1.0.0
make sure you update your package.json file as well
Code To Display images through angular is in tag.i'm using pic controller and the details of that controller is in angular js file. if someone can help me then please do.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<link href="css/animate.css" rel="stylesheet">
</head>
<body ng-app="starter" >
<ion-pane>
<div class="bar bar-header bar-dark">
<button class="button button-icon icon ion-navicon"></button>
<h1 class="title">AdsCafe</h1>
</div>
</ion-pane>
<div ng-controller="pic" >
<ion-content>
<img collection-repeat="photo in pic.photos"
item-height="33%" item-width="33%"
ng-src="{{photo}}">
</ion-content>
</div>
</body>
</html>
Code To set angular array to proper controller
ANGULAR JS CODE
angular.module('starter', ['ionic'])
.controller('pic', function() {
this.photos = ['../img/a.gif','../img/b.gif','../img/c.gif','../img/d.gif','../img/qw.gif'];
];
});
I see there is some mistake here. Perhaps you could give this a try in order.
1) Change pic to pic as pic in ng-controller (this is the main problem i see)
2) remove extra ]; in your controller (maybe is just typo in your code snippet)
3) Check browser console to see whether the image url exist (try with web image to see whether it is working)
<div ng-controller="pic as pic" >
<ion-content>
<img collection-repeat="photo in pic.photos"
item-height="33%" item-width="33%"
ng-src="{{photo}}">
</ion-content>
</div>
angular.module('starter', ['ionic'])
.controller('pic', function() {
this.photos = [
'https://dummyimage.com/600x400/000/fff',
'https://dummyimage.com/600x400/eee/fff',
'https://dummyimage.com/600x400/aaa/fff'
];
});
Can someone help me on how to fix this?
Seems like I can't get my button to link to another page.
I did some research and try to follow the demo, but it's dead end.
I don't know which part I should fix.
register.html
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="Register">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="RegistrationCtrl" class="content">
<button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
after.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="After">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="AfterCtrl" class="content">
<button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic'])
app.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();
}
});
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/',
templateUrl: 'register.html',
controller: 'RegistrationCtrl'
})
.state('after', {
url: 'after',
templateUrl: 'after.html',
controller: 'AfterCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
I could not find AfterCtrl controller in your app.js
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
Also i would suggest to use $state.go("register") and $state.go("after") and also do not forget to inject $state
function($scope, $state)
I ran into a similar issue recently. I found that using
<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button>
fixed my issue.
I am just playing around withe Ionic/AngularJS. I can't get alert window to show up ? I started ionic with a blank template. The app actually launches in the browser window, but when the button is pressed, nothing happens.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var App = angular.module('freshlyPressed', ['ionic']);
App.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();
}
});
});
App.controller( 'AppCtrl' , function($scope, $log)
{
$scope.refresh = function()
{
window.alert("Hello");
}
});
<!DOCTYPE html>
<html data-ng-app="freshlyPressed" data-ng-control="AppCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Freshly Pressed</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-header-bar class="bar-balanced">
<h1 class="title">Freshly Pressed</h1>
<button type="button" class="button" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Contents</h1>
</ion-content>
</body>
</html>
Unless Ionic does something very different than Angular, you have data-ng-control and it should be data-ng-controller.