Please give me wher im doing Worng
<div ng-app="customCharts">
<div ng-controller="HelloHell">
</div>
</div>
Angular
var app = angular.module('customCharts', []);
var app = angular.module('customCharts', ['dx']);
app.controller("ChartController", function ($scope, $http, $q) {
$scope.productSettings = {
dataSource: new DevExpress.data.DataSource({
load: function () {
var def = $.Deferred();
$http({
method: 'GET',
url: 'http://localhost:53640/Home/PostChart'
}).success(function (data) {
def.resolve(data);
});
return def.promise();
}
}),
series: {
title: 'Displays Product Costs for items in our Database',
argumentType: String,
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount'
}
}
})
Json Controller
public JsonResult PostChart()
{
var prod = new List();
using (Ctxdb db = new Ctxdb())
{
var product = db.Products.ToList();
foreach (var p in product)
{
var thing = new { Name = p.ProductName, Cost = p.Price };
prod.Add(thing);
}
}
return Json(prod, JsonRequestBehavior.AllowGet);
}
Your controller in HTML should be
<div ng-controller="ChartController">
also you should have one module
var app = angular.module('customCharts', []);
Related
I'm programming an application
with ionic 1 and firebase 3.
I want to upload an image to the storage of firebase.
When I use html fileupload the image is saved but when i use "cordova.getPictures" the image is not saved.
The code:
.controller("PhotosCtrl",function($scope,$firebaseArray,$firebaseAuth,$firebaseObject, $timeout, $cordovaImagePicker, $ionicPopup){
$scope.upFile = function(){
pickTheImage().then(function(_image) {
processImage(_image);
})
}
function pickTheImage() {
var options = {
maximumImagesCount: 1,
width: 320,
quality: 80
};
return $cordovaImagePicker.getPictures(options).then(function (results) {
return results[0];
})
}
function processImage(_image) {
fetch(_image).then(function (_data) {
return _data.blob()
}).then(function (_blob) {
var task=firebase.storage().ref('images/12312355.jpg').put(_blob);
task.on('state_changed',
function progress(snapshot){
},
function error(err){
$ionicPopup.alert({
title: err
})
},
function complete(){
$ionicPopup.alert({
title: "Imagen guardada!"
})
}
);
})
}
})
Capturing image from camera will return the imageUrl. If you want to convert to blob type then using the below code in processImage function.
//Read the file entry from the file URL
resolveLocalFileSystemURL(imgUrl, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function () {
var imgBlob = new Blob([this.result], {
type: file.type
});
var imgFile = imgBlob;
};
reader.readAsArrayBuffer(file);
});
}, function () {
//on Error
});
You can also refer
http://ourcodeworld.com/articles/read/22/solve-native-path-of-android-content-if-resolvelocalfilesystemurl-doesn-t-work
I'm using Backgrid and Pageablecollection for pagination and each time I make a request I can see on the Network tab in Chrome Developer that the request is being fired twice, and I can't figure out why.
My code looks like this:
RecipeManager.module('Entities', function (Entities, RecipeManager, Backbone, Marionette, $, _) {
Entities.Recipe = Backbone.NestedModel.extend({
urlRoot: 'recipes,
parse: function (response) {
return response.results[0]
}
}
Entities.RecipeCollection = Backbone.PageableCollection.extend({
model: Entities.Recipe,
sync: function (method, model, options)
{ // custom headers in here},
state: {
firstPage: 1
}
queryParams: {
currentPage: 'page',
pageSize: 'per_page'
},
parseState: function (resp, queryParams, state, options) {
return {totalRecords: resp.meta.total}
},
parseRecords: function (response, options) {
return response.results
}
})
var API = {
getRecipeEntities: function () {
var recipes = new Entities.RecipeCollection()
var defer = $.Deferred()
recipes.fetch({
reset: true,
url: 'https://myurl/forgetting/data',
success: function (data) {
defer.resolve(data)
}
})
var promise = defer.promise()
$.when(promise).done(function (fetchedRecipes) {
})
return promise
}
}
RecipeManager.reqres.setHandler('recipe:entities', function () {
return API.getRecipeEntities()
})
And then in the Recipes.ListController I have the following:
RecipeManager.module('RecipesApp.List', function (List, RecipeManager, Backbone, Marionette, $, _) {
List.Controller = {
var recipesListLayout = new List.Layout()
listRecipes: function () {
var fetchingRecipes = RecipeManager.request('recipe:entities')
$.when(fetchingRecipes).done(function (recipes) {
var recipesListView = new List.Recipes({
collection: recipes
})
})
var columns = [{ // load of columns defined here }]
recipesListLayout.on('show', function(){
var paginator = new Backgrid.Extension.Paginator({
collection: recipes,
render: function () {
this.$el.find('ul').addClass('pagination')
return this
}
)}
recipesListLayout.$el.append(paginator.render().el)
}
}
RecipeManager.regions.main.show(recipesListLayout)
}
Recently I started learning Videogular's cue points.
My aim is to pause the video at the given time (5th second here).
Here's my angular controller:
angular.module('myApp',[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls"
])
.controller('HomeCtrl', [
'$sce',
function ($sce) {
this.API = null;
this.onPlayerReady = function(API){
this.API = API;
};
this.init = function init(){
var timePoint = [];
var start = 5;
var end = 6;
var result = {};
result.timeLapse = {
start: start,
end: end
};
result.onLeave = function onLeave(currentTime, timeLapse, params) {
console.log('onleave');
};
result.onUpdate = function onComplete(currentTime, timeLapse, params) {
console.log('completed');
};
result.onComplete = function onUpdate(currentTime, timeLapse, params) {
console.log('update');
};
timePoint.push(result);
this.config = {
preload: "none",
sources: [
{src: $sce.trustAsResourceUrl(hv.url), type: "video/mp4"}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
cuePoints: {
timePoint: timePoint
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
}
}
};
};
this.init();
}]
);
This controller mostly works fine, but none of the onLeave, onUpdate, onComplete callbacks work, no logs printed in console after 6 seconds.
Is there anything wrong inside my codes? Thanks.
My Angular version is 1.3.17, Videogular version is 1.2.4.
You have a working example here:
http://codepen.io/2fdevs/pen/zGJQbQ
JS:
'use strict';
angular.module('myApp', [
"ngSanitize",
"com.2fdevs.videogular"
])
.controller('HomeCtrl', [
'$sce',
function($sce) {
this.API = null;
this.onPlayerReady = function(API) {
this.API = API;
};
this.init = function init() {
var timePoint = [];
var start = 0;
var end = 6;
var result = {};
result.timeLapse = {
start: start,
end: end
};
result.onLeave = function onLeave(currentTime, timeLapse, params) {
console.log('onleave');
};
result.onUpdate = function onUpdate(currentTime, timeLapse, params) {
console.log('onUpdate');
};
result.onComplete = function onComplete(currentTime, timeLapse, params) {
console.log('onComplete');
};
timePoint.push(result);
this.config = {
preload: "none",
sources: [{
src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"),
type: "video/mp4"
}],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
cuePoints: {
timePoint: timePoint
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
}
}
};
};
this.init();
}
]);
HTML:
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-cue-points="controller.config.cuePoints" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"
vg-native-controls="true">
</vg-media>
</videogular>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
Probably you will have something wrong in the HTML.
this is my service
.factory('ProductData', ['$resource', function($resource) {
return $resource('product/:id', {id: '#id'}, {
'update': { method:'PUT' },
'insertNew': { method:'POST' },
'delete': { method:'DELETE' },
});
}]);
and this is in my conroller
$scope.updateProduct = function(item) {
var product = ProductData.get({
id : item.id
}, function() {
product.name = item.name;
product.description = item.description;
product.ctg_id = item.ctg_id;
product.ctgid = item.ctg_id;
product.$update(item.id);
});
};
$scope.deleteProduct = function(item) {
var product = ProductData.get({
id : item.id
}, function() {
product.id = item.id;
product.$delete(item.id);
});
};
when I was working in WAMP, all methods worked fine.
but when I uploaded to a webserver,
GET request sends the right value example:
http://www.xxx-xxx.com/product/53
but all other methods send this
http://www.xxx-xxx.com/product/53?0=5&1=3
how can I fix this?
You should call: ProductData.delete(...) in the $scope.deleteProduct function
I am using the Select2 as a typeahead control. The code below works very well when the user types in the search term.
However, when loading data into the page, I need to be able to manually set the value of the search box.
Ideally something like: $scope.selectedProducerId = {id:1, text:"Existing producer}
However, since no data has been retrieved the Select2 data source is empty.
So what I really need to be able to do is to add a new array of data to the datasource and then set the $scope.selectedProducerId, something like: $scope.producersLookupsSelectOptions.addNewData({id:1, text:"Existing producer}) and then
$scope.selectedProducerId = 1;
Researching this I have seen various suggestions to use initSelection(), but I can't see how to get this to work.
I have also tried to set createSearchChoice(term), but the term is not appearing in the input box.
I would be most grateful for any assistance.
Thanks
This is the html
<div class="col-sm-4">
<input type="text" ui-select2="producersLookupsSelectOptions" ng- model="selectedProducerId" class="form-control" placeholder="[Produtor]" ng-change="selectedProducerIdChanged()"/>
</div>
This is the controller
angular.module("home").controller("TestLookupsCtrl", [
"$scope", "$routeParams", "AddressBookService",
function($scope, $routeParams, AddressBookService) {
$scope.producersLookupsSelectOptions = AddressBookService.producersLookupsSelectOptions();
}
]);
This is the service:
angular.module("addressBook").service("AddressBookService", [
"$http", "$q", function($http, $q) {
var routePrefix = "/api/apiAddressBook/";
//var fetchProducers = function(queryParams) {
// return $http.get(routePrefix + "GetClientsLookup/" + queryParams.data.query).then(queryParams.success);
//};
var _getSelectLookupOptions = function(url, minimumInputLength, idField, textField) {
var _dataSource = [];
var _queryParams;
return {
allowClear: true,
minimumInputLength: minimumInputLength || 3,
ajax: {
data: function(term, page) {
return {
query: term
};
},
quietMillis: 500,
transport: function(queryParams) {
_queryParams = queryParams;
return $http.get(url + queryParams.data.query).success(queryParams.success);
},
results: function(data, page) {
var firstItem = data[0];
if (firstItem) {
if (!firstItem[idField]) {
throw "[id] " + idField + " does not exist in datasource";
}
if (!firstItem[textField]) {
throw "[text] " + textField + " field does not exist in datasource";
}
}
var arr = [];
_.each(data, function(returnedData) {
arr.push({
id: returnedData[idField],
text: returnedData[textField],
data: returnedData
});
});
_dataSource = arr;
return { results: arr };
}
},
dataSource: function() {
return _dataSource;
},
getText: function (id) {
if (_dataSource.length === 0) {
throw ("AddressBookService.getText(): Since the control was not automatically loaded the dataSource has no content");
}
return _.find(_dataSource, { id: id }).text;
}
//initSelection: function(element, callback) {
// callback($(element).data('$ngModelController').$modelValue);
//},
//createSearchChoice:function(term) {
// return term;
//},
addNewData:function(data) {
this.ajax.results(data,1);
};
};
return {
producersLookupsSelectOptions: function() {
var url = routePrefix + "GetClientsLookup/";
return _getSelectLookupOptions(url, 2, "Id", "Name");
},
}
}
]);