I am creating a Phonegap app (Android and iOS) using AngularJS and Websql.
My problem is that i am finding it difficult getting from the Websql query into controller/view.
This is my code.
<!doctype html>
<html ng-app="inmoment">
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-resource.min.js"></script>
<script src="js/catMenu.js"></script>
<script src="js/models.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul ng-controller="sampleController">
<li ng-repeat="cat in cats">
{{cat.catID}}<br />
{{cat.Title}}<br />
{{cat.cCount}}<br />
{{cat.mCount}}
</li>
</ul>
<script src="js/my-app.js"></script>
</body>
</html>
Controller Script
var inmomentNameSpace = angular.module('inmoment', []);
inmomentNameSpace.controller('sampleController', function sampleController(
$scope) {
db.transaction(function(tx) {
$("#catList").empty();
tx.executeSql(
'SELECT CATEGORY.catID, CATEGORY.Title, CATEGORY.image, COUNT(SUBCATEGORY.subID) as cCount, COUNT(MESSAGETB.mesID) as mCount, SUBCATEGORY.title, SUBCATEGORY.catID FROM CATEGORY LEFT OUTER JOIN SUBCATEGORY ON CATEGORY.catID = SUBCATEGORY.catID LEFT OUTER JOIN MESSAGETB ON SUBCATEGORY.subID = MESSAGETB.subID GROUP BY CATEGORY.catID ORDER BY CATEGORY.Title ASC', [],
function(tx, results) {
var len = results.rows.length;
var catObj = [];
for (var i = 0; i < len; i++) {
catObj[i] = results.rows.item(i);
}
console.log(catObj);
$scope.cats = catObj;
})
})
})
When I console.log(catObj), I get the results alright, but they seem not work with my controller.
I will be glad if anyone can help me. Thank you
Related
This questions comes from here
I want to make a filtering, so that I can show the values of colors.name just when they also appear as a value in cars.color
$scope.colors = [{"name":"blue","count":2},
{"name":"red","count":12},
{"name":"pink","count":5},
{"name":"yellow","count":2}];
$scope.cars=[ {"brand":"Ford","color":"blue", "seat":"pink"}
,{"brand":"Ferrari","color":"red", "seat":"pink"}
,{"brand":"Rolls","color":"blue","seat":"pink"}];
And then in the view:
<ul>
<li ng-repeat="n in colors | filter: filteredColors"> {{n}}
</li>
</ul>
The result should be
blue
red
I need the answer not to have ES6, and I need the filter to be in the controller. See plunkr here. Thanks in advance!
controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.colors = [{"name":"blue","count":2},
{"name":"red","count":12},
{"name":"pink","count":5},
{"name":"yellow","count":2}];
$scope.cars=[ {"brand":"Ford","color":"blue", "seat":"pink"}
,{"brand":"Ferrari","color":"red", "seat":"pink"}
,{"brand":"Rolls","color":"blue","seat":"pink"}];
$scope.filteredColors = function(color) {
var carsvar = $scope.cars;
for(var x = 0; x < carsvar.length; x++) {
if (color.name === carsvar[x].color) {
return true;
}
}
return false;
};
});
view:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.6.x" src="https://code.angularjs.org/1.6.6/angular.js" data-semver="1.6.6"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="color in colors | filter: filteredColors"> {{color.name}}
</li>
</ul>
</body>
</html>
You can use a custom filter:
app.filter('colorFilter', function(){
return function(val){
var colorsvar = [{"name":"blue","count":2},
{"name":"red","count":12},
{"name":"pink","count":5},
{"name":"yellow","count":2}];
var filtered = []
angular.forEach(val, function(key, value){
angular.forEach(colorsvar, function(key2, value2){
if(key.color === key2.name)
filtered.push(key)
})
})
return filtered;
}
})
And then on your html:
<li ng-repeat="n in cars | colorFilter"> {{n.color}}
Hope this helps.
As per your first question, there have some answers without using ES6. AngularJS - How to check that a specific key has a specific value in an array
So I thought you don't need to use any inbuilt function to do your logic.
Try to use with manual loop instead of using map or include bla bla bla.. Do Just like a normal JavaScript way in angularjs. Get this answer as a key. Take this answer as a key and do it with angular.filter().
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors = [{"name":"blue","count":2},
{"name":"red","count":12},
{"name":"pink","count":5},
{"name":"yellow","count":2}];
$scope.cars=[ {"brand":"Ford","color":"blue"}
,{"brand":"Ferrari","color":"red"}
,{"brand":"Rolls","color":"blue"}];
$scope.filteredColors = function () {
var colorsvar = $scope.colors;
var carsvar = $scope.cars;
$scope.newValue = [];
for (var i = 0; i < colorsvar.length; i++) {
for (var j = 0; j < carsvar.length; j++) {
if (colorsvar[i].name == carsvar[j].color) {
if ($scope.newValue.indexOf(colorsvar[i].name) ==-1) {
$scope.newValue.push(colorsvar[i].name);
}
}
}
}
return $scope.newValue;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="n in filteredColors()"> {{n}}
</li>
</ul>
</div>
I am working in excel import functionality in AngularJS. Now it's working fine by reading excel values. But I need read a particular column range row count
here I attached my tried code and expected output. Here I get row count as 7 but I need name and subject column row count only expected row count as 4 help how to solve this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Js XLS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.13/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/angular-js-xlsx#0.0.3/angular-js-xlsx.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="myController">
<js-xls onread="read" onerror="error"></js-xls>
<!-- <input type="file" ng-change="read" onerror="error"> -->
</div>
</body>
<script type="text/javascript">
angular.module('MyApp', ['angular-js-xlsx'])
.controller('myController', function($scope) {
$scope.read = function (workbook) {
debugger;
var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
console.log(headerNames);
console.log(data);
for (var row in data)
{
Object.keys(data[row]).forEach(function(key) {
console.log("Key = >" + key);
console.log("Value => " + data[row][key]);
console.log("===========================");
});
}
}
$scope.error = function (e) {
console.log(e);
}
});
</script>
</html>
Data
I am trying to pull a list of names from parse and add them to an onsenui list, the parse query is working because I logged them and it worked, but the list items aren't showing up anywhere.
Here is the app.js
(function(){
var app = angular.module('myApp', ['onsen.directives']);
app.factory('Data', function(){
var Data = {};
Data.items = [];
var parseAPPID = "***************************************";
var parseJSID = "****************************************";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
var NoteOb = Parse.Object.extend("place");
//$(document).on("pageshow", "#places", function(e, ui) {
//$.mobile.loading("show");
var Places = Parse.Object.extend("Places");
var query = new Parse.Query(Places);
query.limit(100);
query.ascending("Name");
query.find({
success:function(results) {
for(var i=0; i<results.length; i++) {
Data.items[i] = results[i].get('Name');
}
},error:function(e) {
}
});
return Data;
});
app.controller('listCtrl', function($scope, Data) {
$scope.items = Data.items;
});
})();
And here is the html pages
Index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1, user-scalable=no">
<meta name="msapplication-tap-highlight" content="no" />
<!--<link rel="stylesheet" src="http://code.jquery.com/jquery-1.9.1.css"></link>-->
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>-->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-blue.css">
<script src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-touch.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<title>MY APP</title>
</head>
<body>
<ons-navigator page="list.html">
</ons-navigator>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
list.html:
<!DOCTYPE HTML>
<html>
<head>
<title>List A-Z</title>
</head>
<body>
<ons-page class="center">
<div ng-controller="listCtrl">
<ons-list>
<ons-list-item ng-repeat="item in items">
{{item}}
</ons-list-item>
</ons-list>
</div>
</ons-page>
</body>
</html>
According to this link, I updated my answer as follows:
(function(){
var app = angular.module('myApp', ['onsen.directives']);
app.factory('Data', function($q){
var parseAPPID = "***************************************";
var parseJSID = "****************************************";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
var Data = Parse.Object.extend("Places", {
// Instance methods
}, {
async: function() {
var deferred = $q.defer();
var query = new Parse.Query(Places);
query.limit(100);
query.ascending("Name");
query.find({
success:function(results) {
// Resolve the deferred $q object before returning the promise
deferred.resolve(results);
for(var i=0; i<results.length; i++) {
Data.items[i] = results[i].get('Name');
}
},error:function(e) {
}
});
return deferred.promise;
}
});
return Data;
});
app.controller('listCtrl', function($scope, Data) {
Data.async().then(function(d) {
$scope.items = d.items;
});
});
})();
Good luck. And you may need to see this: AngularJS: service query returning zero result.
I'm using the angular-ui typeahead directive to connect to the Google Maps API and retrieve an array of addresses. Normally when I need to limit the amount of results visible I do something like:
<input typeahead="eye for eye in array | filter:$viewValue | limitTo:10">
That works perfectly and the results are limited to 10. However, when I try to do the same thing with asynchronous results, it doesn't work. It will give more results than I specified in the limitTo.
Am I doing something incorrectly below?
Here is a plunker:
HTML:
<input ng-model="asyncSelected" typeahead="address for address in getLocation($viewValue) | limitTo:1" typeahead-loading="loadingLocations">
JavaScript:
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
angular.forEach(res.data.results, function(item){
addresses.push(item.formatted_address);
});
return addresses;
});
};
Currently i'm doing the following to workaround, i'm just curious why a simple limitTo doesn't work.
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
var resultNumber = res.data.results.length > 5 ? 5 : res.data.results.length;
for(var i = 0; i < resultNumber; i++){
var obj = res.data.results[i];
var addr = obj.formatted_address;
addresses.push(addr);
}
return addresses;
});
};
typeahead doesn't seem to support promises. So it's better to just bind it to a collection, and then update that collection when you get a response from google. You might want to think about debouncing tough, now a request is done for every letter typed.
Note that you also don't need the filter anymore, because the filter is already being done by google sever side.
http://plnkr.co/edit/agwEDjZvbq7ixS8El3mu?p=preview
var app = angular.module('app',['ui.bootstrap']);
app.controller('Ctrl', ['$scope','$http', function($scope,$http){
$scope.locations = [];
$scope.$watch('asyncSelected', function(val) {
$http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
$scope.locations.length = 0;
angular.forEach(res.data.results, function(item){
$scope.locations.push(item.formatted_address);
});
});
});
}]);
<head>
<link data-require="bootstrap-css#~3.1.1" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<input type="text" ng-model="asyncSelected" placeholder="Address" typeahead="address for address in locations | limitTo:1" typeahead-loading="loadingLocations" class="form-control">
</body>
</html>
i am trying to output array values via a click using backbone view model, please advise how to output each array values on a separate line or maybe displaying each array value in a list item via jquery. Thanks :)
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
<button>click</button>
<div class="ctype"></div>
<div class="cexperience"></div>
<script type="text/javascript">
var Job1 = Backbone.Model.extend({
defaults:{
type:'permanent',
experience:['html','css','php']
}
});
var myJob1 = new Job1();
var Jobview1 = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render: function(){
var _type = myJob1.get('type');
var _experience = myJob1.get('experience');
$('div.ctype').html(_type);
$('div.cexperience').html(_experience);
return this
}
})
$(document).ready(function(e) {
var myJobview1 = new Jobview1();
});
</script>
</body>
</html>
_.each(_experience, function (key, value) {
var tmp = $('<p />');
tmp.html(value);
$('.experience').append(tmp);
)};
this should work.
maybe you need to switch key, value to value, key.
i tend to forget the order of the parameters.