I am pretty new to web development and I have been working on a small project.
This is what I am trying to achieve. I have a badly nested JSON data for 10 products. This is the data I am using.
I have a "View More" button for each product for its specifications. The specifications can be accessed using the index as such "products[index].ProductInfo.p_product_specs.Value". When I click on the "view more" button, I am routing to a different page viewmore.html. In the viewmore.html, I have this html code
<div ng-controller='mainController'>
<div class="viewMore">
<ul ng-repeat="spec in products[id].ProductInfo.p_product_specs.Value">
{{ spec.Key }} : {{ spec.Value}}
</ul>
</div>
</div>
I have a function in the controller which return me the index of that product in the array "products" as soon as I click on the "View More" button.
$scope.viewmorefn = function(){
var self = this;
$scope.id = (function() {
//some code which returns index, console.log gives correct results.
return index;
}
)();
}
But when I try to use "id" in the ng-repeat (in viewmore.html), it just doesn't work. Is there any way I can make "id" accessible in my viewmore.html page? Any help will be greatly appreciated, I have already given this 2 days. Thanks.
EDIT : #uowzd01 : I am not sure if the data is being lost. The controller has this:
$http.get(url)
.success(function (result) {
$scope.products = result.ProductsList;
})
.error( function (data, status) {
console.log("Error retrieving data");
});
And in the viewmore.html I am able to interpolate "{{ products }}" and {{ products[0].ProductInfo.p_product_specs.Value }} and also the data of other objects if I specify the index explicitly.
EDIT 2: Complete code
HTML : First Page : product_list_page.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
<div class="main">
<div ng-view></div>
</div>
</body>
</html>
home.html
<div ng-controller='mainController'>
<div class="showProduct">
<div ng-show="isShow" ng-mouseenter="isShow=true">
<show-repeat></show-repeat>
</div>
</div>
<div class="eproducts" ng-repeat="product in products">
<div class="fixed-size-square" ng-mouseenter="hoverIn()">
<show-products></show-products>
</div>
</div>
</div>
viewmore.html
<div>
<div class="viewMore">
<ul ng-repeat="spec in products[selfId].ProductInfo.p_product_specs.Value">
<li> {{ spec.Key }} : {{ spec.Value}} </li>
</ul>
</div>
</div>
JavaScript code :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('mainController', ['$scope', '$window', '$filter', '$http', function($scope, $window, $filter, $http){
$http.get('data.txt')
.success(function (result) {
$scope.products = result.ProductsList;
})
.error( function (data, status) {
console.log("Error retrieving data");
});
$scope.hoverIn = function() {
$scope.isShow = true;
$scope.pr = this;
$scope.price = this.product.ProductInfo.p_product_price;
}
$scope.hoverOut = function() {
$scope.isShow = false;
}
$scope.returnPrice = function() {
$window.alert('The price is $' + $scope.price);
}
$scope.viewmorefn = function(){
var self = this;
$scope.selfId = (function() {
var count = 0;
var str1 = self.product.ProductInfo.Brand + self.product.ProductInfo.p_product_description;
for ( var i = 0 ; i < $scope.products.length ; i++)
{
var str2 = $scope.products[i].ProductInfo.Brand + $scope.products[i].ProductInfo.p_product_description;
if(str1 === str2)
break;
count = count + 1;
}
return count;
}
)();
console.log('id is : ' +$scope.selfId);
}
}]);
myApp.directive("showRepeat", function(){
return {
template : '<img class="lgImage" src="{{ pr.product.imageURLs.lg }}"> <br / > <div class="descText"> {{ pr.product.ProductInfo.Brand }} {{ pr.product.ProductInfo.p_product_description }} <br /> <div class="divClass"> <ul class="descList" ng-repeat="spec in pr.product.ProductInfo.p_product_specs.Value | newFilter"> <li> {{ spec.Key }} </li> </ul> </div> </div> <span class="priceText"> {{ product.ProductInfo.p_product_price | currency }} <br /> </span> <button id="cartBtn" ng-click="returnPrice()">Add to Cart</button> <br /> <div class="priceTop">{{ pr.product.ProductInfo.p_product_price | currency }} </div>'
}
});
myApp.directive("showProducts", function(){
return {
template : '<div class="prdList"><br /><img class="showprdimg" src="{{ product.imageURLs.sm }}"><br /><br/> <div class="spanText">{{ product.ProductInfo.Brand }} {{ product.ProductInfo.p_product_description }} </div> <br /><br/> <div class="priceText">{{ product.ProductInfo.p_product_price | currency }} </div><br/>"<button id="viewMoreBtn" ng-click="viewmorefn()">View More</button></div>'
}
});
myApp.filter('newFilter', function(){
return function(newSpec) {
var out = [];
angular.forEach(newSpec, function (newSpec) {
if((newSpec.Key === 'ENERGY STAR Qualified') && (newSpec.Value ==='Yes')) {
out.push(newSpec);
}
});
return out;
}
});
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the view more page
.when('/viewmore', {
templateUrl : 'viewmore.html',
controller : 'mainController'
})
});
Plunker Demo
First, to clear some of the dust - though it is not the specific problem, you are instantiating the same controller numerous times - in your HTML and ngRoute. Pick one, not both. I got rid of the ng-controller directives in your HTML, so it just uses ngRoute now. However, because you are calling the same controller for both views, the controller is losing it's values because you are getting a new instance of the controller. It is also fetching the same data twice. While it technically is working, it's really bad JavaScript. You should look at ui-router and do some nested views and instantiate the controller one time and fetch the data one time.
To get it working, I essentially created a service to store the index value in:
myApp.factory('theIndex', function() {
return {
val: ''
}
})
When the controller loads, it pulls whatever value is stored in the service, and when you click the View More button, it stores the index value in the service.
myApp.controller('mainController', ['$scope', '$window', '$filter', '$http', 'theIndex', function($scope, $window, $filter, $http, theIndex){
$scope.selfId = theIndex.val; // get whatever index value is stored, if any
//... buncha stuff
$scope.viewmorefn = function(){
var self = this;
$scope.selfId = (function() {
var count = 0;
var str1 = self.product.ProductInfo.Brand + self.product.ProductInfo.p_product_description;
for ( var i = 0 ; i < $scope.products.length ; i++)
{
var str2 = $scope.products[i].ProductInfo.Brand + $scope.products[i].ProductInfo.p_product_description;
if(str1 === str2)
break;
count = count + 1;
}
return count;
}
)();
theIndex.val = $scope.selfId // set the index value here
console.log('id is : ' +$scope.selfId);
}
}]);
The plunker provided is updated, using all your supplied code. Don't forget to inject the new service into your controller. This should get you up and running, though as I said before, it's pretty ugly.
Related
I have a requirement that i need to read a excel file from any location and to render the data of the excel on the next html page.
I was able to render the excel data with multiple sheets on the same page but now I need to select the file on first page and render its data on the next html page.
Like this:
And on the next screen need to show excel data:
Here in the Sheet Name i need to provide the sheet names from excel and on selecting any sheet name that sheet data need to be loaded in the grid.
I have used two divs to divide the page vertically in two columns.
I was able to achieve this functionality on a single page but now I need to divide this code in multiple pages.
This is the plunker of the work done:
http://plnkr.co/edit/xHEtxtzKrEiKDTrqlafC?p=preview
This is my js code:
angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', function($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
vm.selectedSheet = '';
vm.sheetIndex = 0;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
vm.selectedSheet = '';
vm.sheetIndex = 0;
}
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
vm.onLoadData = function(data) {
vm.data = vm.data || data;
vm.readSheet();
};
vm.sheetChange = function() {
vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet);
vm.readSheet();
};
}])
.directive("fileread", [function() {
return {
scope: {
onLoadData: '&'
},
link: function($scope, $elm, $attrs) {
$elm.on('change', function(changeEvent) {
var reader = new FileReader();
reader.onload = function(evt) {
$scope.$apply(function() {
$scope.onLoadData({
data: evt.target.result
});
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
HTML code:
<!DOCTYPE html>
<html ng-app="app">
<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" multiple="true" fileread="" on-load-data="vm.onLoadData(data)"/>
</div>
</div>
</div>
<div>
<select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames"
ng-change="vm.sheetChange()"></select>
{{vm.selectedSheet}}
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I think i need to store this JSON somewhere, so that it can be used later in different pages.
Should I use service to achieve this functionality or any other approach need to be used please suggest.
I hope this might help!
You can just store the Json data in to any rootScope variable to use in another controllers.
For Example:
You have the following code;
vm.readSheet = function() {
var workbook = XLSX.read(vm.data, {
type: 'binary'
});
var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], {
header: 1
})[0];
vm.sheetNames = workbook.SheetNames;
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);
vm.gridOptions.columnDefs = [];
headerNames.forEach(function(h) {
vm.gridOptions.columnDefs.push({
field: h
});
});
vm.gridOptions.data = data;
};
in here
vm.gridOptions.data = data;
you can set and store data for later usage as an JSON Array;
$rootScope.gridOptionsData = data;
I'm trying to make a search function in my angularjs "webapp". When I search in products all works fine, but when I change everything so that it searches into users, i get an error Cannot read property 'toLowerCase' of undefined.
Here's my js:
return function(arr, searchString){
if(!searchString){
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
result.push(item);
}
});
return result;
};
});
And here's the html that's calling it:
<div ng-controller="userCtrl" class="container-app">
<div class="bar">
<input type="text" class="search" ng-model="searchString" placeholder="Enter your search terms" />
</div>
<div class="searchResultsText">
<h2>Zoekresultaten: </h2>
</div>
<div class="searchResults" ng-repeat="user in users | searchFor:searchString">
<a class="normal" href="#">{{user.name}}</a>
</div>
it does show me the list of users, just as soon as I start typing in the search bar it gives me the error.
when I use the exact same function, with a different controller it works. Here are the 2 controllers:
app.controller('customersCtrl', function ($scope, $http) {
$http.get(apiUrl + "product/list")
.success(function (response) {
$scope.products = response;
});
});
app.controller('userCtrl', function ($scope, $http) {
$http.get(apiUrl + "user/list")
.success(function (response) {
$scope.users = response;
});
});
so basically customerCtrl works fine, but when i change values to userCtrl it stops working.
any suggestions?
Most likely item.title is at least once undefined.
return function(arr, searchString){
if(!searchString){
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item){
if(
angular.isDefined(item.title) &&
item.title.toLowerCase().indexOf(searchString) !== -1
){
result.push(item);
}
});
return result;
};
how to check textbox isEmpty in angularjs Factory?
My HTML Source is
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
</div>
</body>
</html>
angular.module('myApp', [])
.controller('customersCtrl', function($scope){
$scope.changed = function(){
if(!$scope.test){
$scope.msg = 'empty';
} else {
$scope.msg = 'not empty';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test" ng-change="changed()"/>
{{ test }} | {{ msg }}
</div>
var customersCtrl = function($scope,Validate){
var isEmpty = Validate.isEmpty($scope.test);
$scope.Validation = Validate;
if(isEmpty){
console.info('Textbox is empty');
}else{
console.info('Textbox is not empty');
}
};
angular.module('myApp').controller('customersCtrl', customersCtrl);
var Validate = function() {
var factory = {};
factory.isEmpty = function(val){
var result = false;
if(!val){
result = true;
}
return result;
};
return factory;
};
angular.module('myApp').factory('Validate', Validate);
Here is the Plunker according to your requirement.
In your controller, you can check the model value at any point in time. Like
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
if($scope.test == ""){
// textbox is empty, do your stuff here
}
});
additional trick !
you can check it on angular expression . see this below to example !
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.test = "";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
<span ng-show="test.length == 0">
is empty </span>
</div>
</body>
</html>
hope !
I am trying to use a service to set title in controller1 and then access title in controller2.
sharedProperties.setTitle(title) works in controller1, but when I try to get the title in controller2, it gets "title" (the initial value) instead of the new value.
I've also tried storing title in an object but it didn't work.
app.service('sharedProperties', function () {
var title = "title"
return {
getTitle: function () {
return title;
},
setTitle: function (val) {
title = val;
}
}
});
app.controller('controller1', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$('body').on("click", "button[name=btnListItem]", function () {
// gets the title
var title = $(this).text();
// sets the title for storage in a service
sharedProperties.setTitle(title);
});
}]);
app.controller('controller2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.sharedTitle = function() {
return sharedProperties.getTitle();
};
}]);
And in my view, I have {{ sharedTitle() }} which should, as I understand it, update the title text with the new title.
Also, in case this is relevant: the two controllers are linked to two different html pages.
What am I doing wrong?
EDIT
Updated button listener:
$('body').on("click", "button[name=btnListItem]", function () {
// gets the text of the button (title)
var title = $(this).text();
sharedTitle(title);
alert(sharedProperties.getTitle());
document.location.href = '/nextscreen.html';
});
$scope.sharedTitle = function (title) {
sharedProperties.setTitle(title);
};
It seems to be correct in your sample code. I setup jsfiddle and it seems work correctly. Finding out a difference between my jsfiddle and your actual code would help you to find the problem you should solve.
Javascript:
angular.module('testapp', [])
.service('sharedProperties', function(){
var title = 'title';
return {
getTitle: function(){
return title;
},
setTitle: function(val){
title = val;
}
};
})
.controller('controller1', function($scope, sharedProperties){
$scope.change_title = function(newvalue){
sharedProperties.setTitle(newvalue);
};
})
.controller('controller2', function($scope, sharedProperties){
$scope.sharedTitle = function(){
return sharedProperties.getTitle();
};
})
Html:
<div ng-app="testapp">
<div ng-controller="controller1">
<input ng-model="newvalue">
<button ng-click="change_title(newvalue)">Change Title</button>
</div>
<div ng-controller="controller2">
<span>{{sharedTitle()}}</span>
</div>
</div>
My jsfiddle is here.
You have to print console.log(sharedProperties.getTitle()); Dont need return from controller.
So your code of controller2 is $scope.sharedTitle = sharedProperties.getTitle();
You need to use the $apply so that angular can process changes made outside of the angular context (in this case changes made by jQuery).
$('body').on("click", "button[name=btnListItem]", function () {
// gets the title
var title = $(this).text();
// sets the title for storage in a service
$scope.$apply(function() {
sharedProperties.setTitle(title);
});
});
See plunker
That said, this is BAD PRACTICE because you're going against what angular is meant for. Check “Thinking in AngularJS” if I have a jQuery background?. There are cases when you need to use $apply like when integrating third party plugins but this is not one of those cases.
I'm trying to show the html that has been encoded. but this doesn't seem to work.
input is via:
<h1>Some header</h1>
and it shows:
<h1>Some header</h1>
But I want it to render the html; but as shown in the following pen; it just show the source html
this is my current controller:
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function ($scope, $sce) {
$scope.trustedHtml = $sce.trustAsHtml('<h1>Some header</h1>');
});
with the following html:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="trustedHtml"></div>
</div>
http://codepen.io/cskiwi/pen/PqXdOa
To decode the html, you can use this trick:
var encodedHtml = '<h1>Some header</h1>';
var decodedHtml = angular.element('<div>').html(encodedHtml).text();
Then apply to your property:
$scope.trustedHtml = $sce.trustAsHtml(decodedHtml);
You will have to sanitize your html data/string :
I have the same problem before some time , then i created a filter for this problem, You can use this filter to do sanitize your html code:
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode) {
return $sce.trustAsHtml(htmlCode);
}
}]);
in html you can use like this:
<div ng-bind-html="businesses.oldTimings | sanitize"></div>
businesses.oldTimings is $scope variable having description of strings or having strings with html tags , $scope.businesses.oldTimings is the part of particular controller that you are using for that html.
see in the snapshot:
you can use limitHtml filter to do the same:
app.filter('limitHtml', function() {
return function(text, limit) {
var changedString = String(text).replace(/<[^>]+>/gm, ' ');
var length = changedString.length;
return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
}
});
Then you can add bothe filter in your html like that:
<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">
Hope it will work for you.
Check this codepen please
http://codepen.io/anon/pen/xGmaWR
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="trustedHtml"></div>
</div>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function ($scope) {
$scope.trustedHtml = '<h1>Some header</h1>';
});
Angular Docs