I am able to read the json content from file in chrome app but i want the returned json content in $scope.somevar. If i try to initialize $scope.somevar inside method, it goes out of scope.
SearchApp.controller("MyTagsApp", function($scope) {
var myFile = '';
chrome.runtime.getPackageDirectoryEntry(function(root) {
root.getFile("MY_FILE.json", {}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
myFile = JSON.parse(this.result);
$scope.somevar = JSON.parse(this.result);
console.log(myFile);
});
});
});
console.log($scope.somevar); });
the last line returns undefined. Being new to the angular technology, i am unable to understand where the issue is.
I am also trying to display the content on HTML page
<ul ng-repeat="i in somevar | filter: searchKeyword">
<li>{{i.items.name}}</li>
</ul>
No Response.
console.log($scope.somevar);
on the last line is executed earlier so the $scope.somevar is not initialized yet. Why are you trying to dump the contents anyway? The JSON content will be eventually accessible in the scope. If you need to do something with that result do it inside the anonymous function.
Related
I am using Angular js with ASP.NET MVC and file upload done using codepen method.
It is running fine because I want to store the binary array so I can convert later and set it back.
But the problem I am facing is to validate the selected thing is image or not!
I can't find the way how can I check the selected thing is image or not?
Anyone have any idea about this?
I have also used parsley js for validation but it is angular js here also how can I use parsley to validate the selected thing is image or not or manually?
angular.module('starter', [])
.controller('Ctrl', function($scope) {
$scope.data = {}; //init variable
$scope.click = function() { //default function, to be override if browser supports input type='file'
$scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
$scope.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
if(f.type === 'image/jpeg' || f.type === 'image/png') {
console.log('The file type is ' + f.type);
// do something here
} else {
console.log('The file type is ' + f.type);
// do some other thing here
}
r.onloadend = function(e) { //callback after files finish loading
$scope.data.b64 = e.target.result;
$scope.$apply(); console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"
//here you can send data over your server as desired
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
});
or you can dynamically set accept="image/*" attribute to your html element.
check here
I'm trying to print a div that has been rendered using Angular. I'm using this answer as a starting point https://stackoverflow.com/a/30765875/285190, with the print function being pretty simple
$scope.printIt = function(){
var table = document.getElementById('printArea').innerHTML;
var myWindow = $window.open('', '', 'width=800, height=600');
myWindow.document.write(table);
myWindow.print();
};
The problem is the innerHTML contains all the items that would exist if the ng-show ng-hide directives hadn't been executed.
Is there a way to get the actual HTML the client is seeing, i.e. after Angular has performed its magic?
Please use $compile service to transform angularized HTML to actual HTML.
Demonstration of $compile
https://stackoverflow.com/a/26660649/5317329
$scope.printIt = function () {
angular.element('#tempHtml').html("");
var table = document.getElementById('printArea').html();
var compiledHTML = $compile(table)($scope);
$timeout(function () {
angular.element(document.querySelector('#tempHtml')).append(compiledHTML);//Please added <div id="tempHtml"></div> in page/View for temporary storage, Clear the div after print.
console.log(angular.element('#tempHtml').html());
var myWindow = $window.open('', '', 'width=800, height=600');
myWindow.document.write(angular.element('#tempHtml').html());
myWindow.print();
angular.element('#tempHtml').html("");//Clearing the html
}, 300); // wait for a short while,Until all scope data is loaded If any complex one
};
Hope this will help you
i'm trying to open dialog box using angular material mdDialog with one text box and drop down field but once it open it can not access outer scope data.
my code is
$scope.ouetButton=function(){
$mdDialog.show({
scope: $scope.$new(),
templateUrl: "printDialog.html"
});
// Button click in templete
$scope.closeDialog = function(sheetout, reason, teststartTime) {
$mdDialog.hide();
var sheets = $scope.sheets;
console.log("i got this value undifined ",sheets );
}
}
if i use some paramater like
$scope.ouetButton=function(){
$mdDialog.show({
scope: this,
templateUrl: "printDialog.html"
});
// Button click in templete
$scope.closeDialog = function(sheetout, reason, teststartTime) {
$mdDialog.hide();
var sheets = $scope.sheets;
console.log("i got this value fine",sheets );
}
}
than it get value of sheets but after close it i can not click again on
$scope.ouetButton
To get a JSON string (e.g., from reading a file) into an actual JavaScript object, use JSON.parse(string). Here is an example:
fs.readFile('data.txt', function(err, data) {
if (err) throw err;
var array = JSON.parse(data); // converts the JSON string into an actual object/array
// use array as you did in your question...
});
BONUS: Use a for...of loop to process each element of the array:
for (var obj of array) {
console.log(obj.date_created);
// etc.
}
Note that this is only available since ECMAScript 6, but since you're using Node.js, that shouldn't be a problem.
This file contains a VALID JSON STRING, so just read the file and do JSON.parse(), and then you can do anything else with the JSON object.
I create a forEach loop. I can access data from Firebase with this loop and I can change variable. But I can not save these changes on Firebase. How can I save these changes? Here's my code:
var posts = $firebaseArray(ref);
posts.$loaded().then(function(item){
item.forEach(function(childSnapshot){
var num = childSnapshot.point-1;
childSnapshot.lastPoint = num;
});
});
You're using the AngularFire framework, which builds UI bindings on top of Firebase's regular JavaScript SDK. You should only be using it for things that you're binding to the Angular UI elements. For everything else, you're likely better off using Firebase's regular JavaScript SDK.
If I understand your requirement correctly, you're trying to loop over all child nodes in a database location once and modify a property. If so:
ref.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var child = childSnapshot.val();
childSnapshot.ref().update({ lastPoint: child.point - 1 });
});
});
The relevant sections of the Firebase documentation are on reading data once and updating data.
Since AngularFire is built on top of Firebase's JavaScript SDK, they work perfectly together. So if elsewhere you bind the posts to the scope ($scope.posts = $firebaseArray(ref)), they will be updated automatically when you update the last point with the above snippet.
You can create a service that contains a getter and a setter. It would look something like this;
angular.module('app').factory("DataHandler",
function() {
var data;
return {
get: function() {
return data;
},
set: function(something) {
data = something;
}
}
}
);
Then in your code you would call:
var posts = $firebaseArray(ref);
posts.$loaded().then(function(item){
item.forEach(function(childSnapshot){
var num = childSnapshot.point-1;
childSnapshot.lastPoint = num;
DataHandler.set(childSnapshot);
});
});
Then wherever/whenever you need to get that data just call:
Datahandler.get();
I'm trying to bind to a primitive with angularfire. Here's how I"m doing it:
$firebase(fb.child('counts/node')).$on('value', function (obj) {
$scope.nodeCount = obj.snapshot.value
})
Is this correct? This API seems very different from the rest of firebase. I expected to get an ss as callback and do ss.val() but that doesn't seem to be the case. Can someone confirm if this is how it's supposed to be or if I'm doing it wrong. Thanks.
Generally, as outlined in the getting started guide and API, you should simply be accessing the data directly in the view:
// javascript
$scope.messages = $firebase(new Firebase(URL));
<!-- html -->
<li ng-repeat="message in messages">{{message}}</li>
If you want to iterate the data in a controller (bad) or service (better), you can read the keys in the order as the database by using $getIndex().
// javascript
var ref = $firebase(new Firebase(URL));
ref.$on('loaded', function() {
angular.forEach(ref.$getIndex(), function(key) {
console.log('the next message is', key, ref[key]);
});
});
If you are, in fact, trying to synchronize a single primitive value, angularFire is hardly necessary:
$scope.primitive = null;
var ref = new Firebase(URL);
ref.on('value', function(snap) { $scope.primitive = snap.val(); });
$scope.saveValue = function(newValue) {
ref.set(newValue);
};
But certainly possible:
// javascript
$scope.primitive = $firebase(new Firebase(URL));
<!-- html -->
<input ng-model="primitive.$value" />
All of this is covered in the above links, which should be treated as required reading before getting started with Angular + Firebase.
changes in 0.8
angularFire 0.8 will be out soon. It will change this structure a little bit, utilizing a $asArray(), $asObject(), and also providing a .then() method, so a bit more like this:
// javascript
var ref = $firebase(new Firebase(URL));
$scope.messages = ref.$asArray();
$scope.ref.then(function() {
angular.forEach($scope.messages, function(message) {
console.log('the next message is', message.$id);
});
});
<!-- html -->
<li ng-repeat="message in messages">{{message}}</li>