Our task giving is that try to load images to the shopping application pick2get by using ng-src and make it look attractive.
For which we had written below code -
In HTML file as -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="index.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="topnav">
<i>Check out</i>
<i>Sign In</i>
<b><i>Pick2get</i></b>
</div>
<br />
<div class="search_drop_down">
<select id="month" class="select select-styled">
<option value="hide">-- Brand --</option>
<option ng-repeat="pdtBrand in products">{{pdtBrand.brand}}</option>
</select>
<select id="year" class="select select-styled">
<option value="hide">-- Price --</option>
<option value="low_price_to_high">Low Price to High</option>
<option value="hign_price_to_low">High Price to Low</option>
</select>
<input class="search" placeholder="Search" size="40" type="text">
</div>
<div class="product_box" ng-repeat="pdt in products">
<div class="single_1">
<div class="container">
<div class="discount">
<div class="discount_badge">{{pdt.discount}}</div>
<span class="discount_text">Discount</span>
</div><img ng-src={{pdt.image}}></div></div>
<div class="single_2">
<div class="prod_desc">
<span class="pdt_name">{{pdt.name}}</span>
<div class="pdt_details_2_col">
<span class="brand">Brand</span>
<span class="brand_name">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name">{{pdt.price}}</span>
</div>
</div>
</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-model="pdt.quantity">
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48"
ng-show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"
ng-hide="pdt.quantity<1?true:false" ng-click="addToCart();" />
</div>
</div>
</body>
</html>
In Index JS as
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.quantity=0;
//Add image property to the products and the image should have the url of images
var imgPath = 'img/cycle.jpg'
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
quantity:0
},
]
$scope.addToCart=function(){
alert('Product Added to Cart successfully')
return "success";
}
});
Getting error as -
Node.js (linux; U; rv:v8.15.1): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
1A[2KNode.js (linux; U; rv:v8.15.1) AngularJS Test Controller should exist product image FAILED
Expected undefined to equal 'img/cycle.jpg'.at UserContext.<anonymous (test/index_test.js:13:42)
Node.js (linux; U; rv:v8.15.1): Executed 1 of 1 (1 FAILED)
Please suggest where we went wrong
Product array doesnt have the image key .. it per the html code it should be part of the array
Please add this image file in the array like you have added price other fields..
Related
This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 3 years ago.
When I click the button, default/init values are appended into the textArea but when I try to change the text (firstName/ middleName / lastName) in their respective field, clicking the button has no effect.
Associated code is spread across the following files: MainHTML, cashierApp.html, cashier.js, cashierCtrl.ctrl.js, cashierService.service.js and headTemplate.html
Main HTML page
<html ng-app="cashierAPP">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>Cashier-HomePage</title>
<link href="header.css" rel="stylesheet">
<link href="pageTemplate.css" rel="stylesheet">
</head>
<body ng-controller="cashierController">
<ng-include src="'CashierApp.html'"></ng-include>
<script src="http://127.0.0.1:8887/cashier.js"></script>
<script src="http://127.0.0.1:8887/cashierCtrl.ctrl.js"></script>
<script src="http://127.0.0.1:8887/cashierService.service.js"></script>
</body>
</html>
CashierApp.html
<div>
<div>
<ng-include src="'http://127.0.0.1:8887/headtemplate.htm'"></ng-include>
</div>
<div>
<h4>Enter First name</h4><input type="text" ng-model="firstName"><br>
<h4><input type="checkbox" ng-model="hasMiddle">Enter Middle name</h4>
<input type="text" ng-show="hasMiddle" ng-model="middleName"><br>
<h4>Enter last name</h4><input type="text" ng-model="lastName"><br><br>
<button ng-click="getName()">Get Name</button><br>
<h4> Your Full Name:     <textarea ng-bind="fullName" readonly></textarea> </h4>
</div>
</div>
Cashier.js--
var cashierApp = angular.module("cashierAPP",[]);
CashierCtrl.ctrl.js
cashierApp.controller("cashierController", function($scope, cashierService) {
$scope.firstName = "John";
$scope.middleName = "0";
$scope.lastName = "Doe";
$scope.getName = function() {
$scope.fullName = cashierService.NameIs($scope.firstName, $scope.middleName, $scope.lastName);
}
});
CashierService.service.js
cashierApp.service("cashierService", function() {
this.NameIs = function(a, b, c) {
return a + " " + b + " " + c;
}
});
headTemplate.html
<table cellspacing="50px" ; cellpaddinging="20px">
<tr>
<th>AngularJS Cashier Application</th>
<th>This is my Global Nav item 2 </th>
<th>This is my Global Nav item 3 </th>
<th>Participant</th>
</tr>
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>CALCULATIONS</td>
<td>MORE...</td>
</tr>
<tr class="pageBody">
<td>Put Widgets here...</td>
</tr>
</table>
Since you are using ng-include it will create a separate child scope. So ng-model is not getting updated.
You need to use $parent to access the ng-model properties like below.
<div>
<div>
<ng-include src="'http://127.0.0.1:8080/headtemplate.htm'"></ng-include>
</div>
<div>
<h4>Enter First name</h4><input type="text" ng-model="$parent.firstName"><br>
<h4><input type="checkbox" ng-model="hasMiddle">Enter Middle name</h4>
<input type="text" ng-show="hasMiddle" ng-model="$parent.middleName"><br>
<h4>Enter last name</h4><input type="text" ng-model="$parent.lastName"><br><br>
<button ng-click="getName()">Get Name</button><br>
<h4> Your Full Name:     <textarea ng-model="fullName" readonly></textarea> </h4>
</div>
</div>
I have an array of objects that looks like
$scope.pArray = [{id: 0, name: 'bob'}, {id: 1, name: 'jen'}];
In my select dropdown, Im using ng-options instead of ng-repeat like so:
<select id="province" name="item" ng-model="obj.name" required
ng-options="item.id as prov.name for item in pArray track by item.id"></select>
Now when I hit the submit button, the value of obj.name is an object instead of the integer (0 or 1). How can I change this so that instead of the object, I get the id?
You can try this,
<select ng-model="selected" ng-options="emp.name for emp in pArray ">
</select>
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.pArray = [{id: 0, name: 'bob'}, {id: 1, name: 'jen'}];
$scope.getselected = function(selected) {
alert(selected.id)
}
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select ng-model="selected" ng-options="emp.name for emp in pArray ">
</select>
</div>
<button type="button" class="btn btn-primary" ng-click="getselected(selected)">selected</button>
</form>
</div>
</div>
</body>
</html>
Referring to the the angular docs:
https://docs.angularjs.org/api/ng/directive/ngOptions
You should try:
ng-options="item as item.name for item in pArray track by item.id"
You should try changing the "item.id as" to "item as" since you are using track by item.id. Also, did you mean "item.name" and not "prov.name"
Anyway, that's just quick and hopefully helpful place to start.
Am newbie to angular js, Currently my number is 10000000 its show like bilion format number like 10,000,000 how to show like in angular js?
<div class="input-group-icon">Max <span class="error">*</span>
<div class="input-group">
<input style="border-right:none;" name="investment_amount_max" ng-model="attributes.investment_amount_max" max="{{constants.globalValue.maxNumber}}"
min="{{attributes.investment_amount_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required
class="form-control input-sm m-bot15" />
<span style="border-left:none; background:none; border-color:#e2e2e4;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$sss'}}</span> </div>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.required" class="error">{{formValidation.required}}</label>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.min" class="error"> {{formValidation.minMax}} </label>
<label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.max" class="error"> {{formValidation.numberMax}} </label>
<label for="investment_amount_min" ng-show="submittab1 && attributesForm.investment_amount_max.$error.number" class="error">{{formValidation.errorNumber}}</label>
</div>
How to show that number filter using my above codeing?
See angular number filter
angular.module('numberFilterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = 10000000000;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="numberFilterExample">
<div ng-controller="ExampleController">
<label>Enter number: <input ng-model='val'></label><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br>
</div>
</div>
If you're looking for a way to format the number in the input field, I suggest you look up the answers on this thread : How do I add Thousands separator to my html form
It depends on how you want to show it, but here's an example using a filter.
html
<body ng-controller="MainCtrl">
<input ng-model="number" />
{{number | numberFilter}}
</body>
js
app.filter('numberFilter', function() {
return function numberWithCommas(input) {
return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
});
The default number formatting should give you what you want. So rather then {{myVal}}, you would use {{ myVal | number}}.
The following snippet will show this in action:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myProg">
<script>
angular.module('myProg', [])
.controller('myController', ['$scope', function($scope) {
$scope.myVal = 1000000000;
}]);
</script>
<div ng-controller="myController">
<label>Enter number: <input ng-model='myVal'></label><br>
Standard: <span id='number-default'>{{myVal}}</span><br>
Formatted: <span id='number-default'>{{myVal | number}}</span><br>
</div>
</body>
</html>
And the result, when you plug that into Plunker (for example), is as follows:
https://plnkr.co/edit/r15xnq392ZaQbmqIAZT2?p=preview
<script>
angular.module("myapp",[])
.controller("myCtrl",function($scope){
$scope.vars=1909009;
})
</script>
<body ng-controller="myCtrl">
<h1>{{vars |number}}</h1>
</body>
Try Intl.NumberFormat() default usage:
var number = 1000000000;
console.log(new Intl.NumberFormat().format(number));
--> 1 000 000 000
console.log(new Intl.NumberFormat('en-US').format(number));
--> 1,000,000,000
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
I am making a loan calculator using Ionic Framework. What I am trying to do is to bind the value of the slide bar and the value that is in the input field. When I slide the slide bar let's say to the value of 10, I want the text field input to display a value of 10 as well. And when I increase or decrease the number using the up and down arrows I want the value in the text field to not jump back to 0 again, but to start from the value that is the same with the slide bar. I have tried using ng-bind, ng-controller, ng-model and ng-change and only using placeholder at the moment but I know I shouldn't use placeholder.
Below are my codes:
index.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-header-bar class="bar-stable">
<h1 class="title">Payment Calculator</h1>
</ion-header-bar>
<ion-content>
<!--start-->
<form name="MyForm">
<div class="range range-assertive" ng-controller="ListCtrl" >
<div class="list card">
<label class="item item-input">
<span class="input-label">Loan Amount</span>
<input type="number" name="MyTextField" id="loan.amount" value="{{user.value}}" ng-model="user.value" ng-change="myChange(user.value)" ng-bind="user.value" placeholder=
"{{user.value}}">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{user.min}}" max="{{user.max}}" value="{{user.value}}" step="1" ng-model="user.value" ng-change="myChange(user.value)" ng-bind=
"user.value">
<span ng-bind="user.value"></span>
/{{user.max}}
<i class="icon ion-social-euro"></i>
<label class="item item-input">
<span class="input-label">Periods</span>
<input type="number" id="periods" value= "{{periods.value}}" ng-model="periods.value" ng-change="myChange(periods.value)" placeholder="{{periods.value}}">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{periods.min}}" max="{{periods.max}}" value="{{periods.value}}" step="1" ng-model="periods.value" ng-change=
"myChange(periods.value)">
{{periods.value}}
/{{periods.max}}
<i class="icon ion-social-euro"></i>
<label class="item item-input">
<span class="input-label">Rate</span>
<input type="number" id="rate" value= "{{rate.value}}" ng-model="rate.value" ng-change="myChange(rate.value)" placeholder="{{rate.value}}">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{rate.min}}" max="{{rate.max}}" value="{{rate.value}}" step="1" ng-model="rate.value" ng-change="myChange(rate.value)">
{{rate.value}}
/{{rate.max}}
<i class="icon ion-social-euro"></i>
</div>
</div>
<button onclick="pmtCalc()" class="button" style="margin: 1em 1em 1em 1em">Calculate</button><br>
<div class="list">
<label class="item item-input">
<span class="input-label">Answer</span>
<p type="number" id="ANSWER"></p>
</label>
</div>
<!--<p id="POWER"></p>-->
<script>
function pmtCalc() {
/*http://www.financeformulas.net/Loan_Payment_Formula.html*/
L = parseFloat(document.getElementById("loan.amount").value);
P = parseFloat(document.getElementById("periods").value);
R = parseFloat(document.getElementById("rate").value);
N = L * R/12/100;
D = 1 - Math.pow(1+(R/12/100),-P);
ANS = N/D
document.getElementById("ANSWER").innerHTML = ANS;
/*document.getElementById("POWER").innerHTML = D;*/
}
</script>
</form>
<!--END!-->
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// 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('starter', ['ionic'])
.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('ListCtrl', function($scope) {
$scope.user= {
min:0,
max:200000,
value:0
}
$scope.myChange=function(val){
console.log("on-change",$scope.user);
console.log("on-change",val);
};
$scope.periods= {
min:0,
max:120,
value:0
}
$scope.myChange2=function(val){
console.log("on-change",$scope.periods);
console.log("on-change",val);
};
$scope.rate= {
min:0,
max:20,
value:0
}
$scope.myChange3=function(val){
console.log("on-change",$scope.rate);
console.log("on-change",val);
};
});
So how can I bind the slider value to the input field so that when I change the slider value, the input field value change together as well and vice versa?
The problem is due to the range input that return a string value and not a number as the number input.
For this reason generally I use a directive like this:
app.directive('input', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
if (attrs.type === 'range') {
ctrl.$parsers.push(function (value) {
return isFinite(parseFloat(value)) ? parseFloat(value) : ctrl.$modelValue;
});
}
}
};
});
I also refactored your code removing all unuseful value attributes on input tags, and "illegal" js inside your view and calculating the "answer" in real time using a more elegant $watchGroup:
Controller:
$scope.user = {
min: 0,
max: 200000,
value: 0
};
$scope.periods = {
min: 0,
max: 120,
value: 0
};
$scope.rate = {
min: 0,
max: 20,
value: 0
};
$scope.answer = 0;
$scope.$watchGroup([
function(){ return $scope.user.value},
function(){ return $scope.periods.value},
function(){ return $scope.rate.value}
], function(newValues, oldValues){
var l = parseFloat(newValues[0]);
var p = parseFloat(newValues[1]);
var r = parseFloat(newValues[2]);
var n = l * r / 12 / 100;
var d = 1 - Math.pow(1 + ( r / 12 / 100 ), -p);
var answer = n / d;
$scope.answer = answer || 0;
});
HTML:
<div class="list card">
<label class="item item-input">
<span class="input-label">Loan Amount {{user.value}}</span>
<input type="number" name="MyTextField" id="loan.amount" ng-model="user.value">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{user.min}}" max="{{user.max}}" step="1" ng-model="user.value"> {{user.value}}/{{user.max}}
<i class="icon ion-social-euro"></i>
<label class="item item-input">
<span class="input-label">Periods</span>
<input type="number" id="periods" ng-model="periods.value" placeholder="{{periods.value}}">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{periods.min}}" max="{{periods.max}}" step="1" ng-model="periods.value"> {{periods.value}} /{{periods.max}}
<i class="icon ion-social-euro"></i>
<label class="item item-input">
<span class="input-label">Rate</span>
<input type="number" id="rate" ng-model="rate.value" placeholder="{{rate.value}}">
</label>
<i class="icon ion-social-euro-outline"></i>
<input type="range" min="{{rate.min}}" max="{{rate.max}}" step="1" ng-model="rate.value"> {{rate.value}} /{{rate.max}}
<i class="icon ion-social-euro"></i>
</div>
<div class="item">Answer: {{answer}}</div>
Take a look to the demo codepen
Enjoy!
here is what I use:
My Range
<ion-item class="range range-positive" id="range1">
<label>0</label>
<input type="range" value="{{slider.rangeValue}}" ng-model="slider.rangeValue" min="0" max="100" step="1" name="myrange">
<label>80</label>
</ion-item>
<div class="item item-divider">
Value: {{slider.rangeValue}}
</div>
Then my controller:
.controller('myRangePageCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
$scope.slider = {};
$scope.slider.rangeValue = 50;
$scope.$watch('slider.rangeValue',function(val,old){
$scope.slider.rangeValue = parseInt(val);
});
$scope.rangeFilter = function(number) {
return (number.value > $scope.slider.rangeValue);
};
}])
Following app shows three todo items at first and
after adding an new data, it shows updated lists for a moment and go back to the original state.
Could you tell me why does it go back to the initial state automatically?
link for Pluker
http://plnkr.co/edit/h6THusBe7AWFle5ixXzX?p=preview
==================================
<!DOCTYPE html>
<html ng-app="initExample">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="well" ng-controller="ExampleController">
<h1> AngularJS Todo List</h1>
<p> Total <strong> {{todolist.length}} </strong> / Remain <strong> {{countRemain()}} </strong> </p>
<ul>
<li ng-repeat="todo in todolist" class="checkbox"> <input ng-model="todo.done" type="checkbox"> {{todo.title}}</li>
</ul>
<form name="newItemForm" class="form-inline" action="">
<div class="form-group">
<label class="sr-only" for="newItemText" placeholder="Type new ToDo"></label>
<input type="text" class="form-control" ng-model="newTodo" name="newItemText" placeholder="Type new Todo">
</div>
<button type="submit" ng-click="addNewTodo(newTodo)" class="btn btn-default"> Add </button>
</form>
</body>
</html>
============================
// Code goes here
var mymodule=angular.module('initExample', []);
mymodule.controller('ExampleController',
['$scope', function($scope) {
$scope.todolist = [
{done: true, title:'AngularJS study'},
{done: false, title:'music listening'},
{done: false, title:'run'}
];
$scope.countRemain = function() {
var count = 0;
var list = $scope.todolist;
angular.forEach(list, function(val, key) {
if(!list[key].done) count++;
});
return count;
};
$scope.addNewTodo = function(newTodo) {
todolist.push({done: false, title: newTodo});
};
}
]
);
Remove the action attribute from the form or add "preventDefault" from the button click.
Fixed the plunkr:
<form name="newItemForm" class="form-inline">
http://plnkr.co/edit/KFpbbdlDPbnIPAW43EaG?p=preview
P.S. also fixed the addNewTodo Function:
$scope.addNewTodo = function(newTodo) {
$scope.todolist.push({done: false, title: newTodo});
};
You need to remove action attribute from form definition, otherwise browser will try to submit it, reloading the page:
<form name="newItemForm" class="form-inline">
<!-- ... -->
</form>
Demo: http://plnkr.co/edit/MwTmGqzdELzUbrY82kKg?p=preview