I have a map with Jqvmap plugin, and if we want to select a region by its code, we do:
$('#vmap').vectorMap('set', 'colors', {us: '#ffffff'});
$('#vmap').vectorMap('set', 'colors', {fr: '#ffffff'});
...
But when this code comes from a variable, I do not know how to do:
$('#table td').click(function(){
var dpt = $(this).text();
$('#vmap').vectorMap('set', 'colors', {dpt: '#ffffff'});
});
I found a solution :
$('#table td').click(function(){
var dpt = $(this).text();
var color = {[dpt]:"#ffffff"};
$('#vmap').vectorMap('set', 'colors', color);
});
Related
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-options="options" chart-series="series" chart-click="onclick"></canvas>
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.controller('StackedBarCtrl', ['$scope', function ($scope) {
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
$scope.options = {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
};
$scope.onclick = function(points,evt)
{
console.log("evt "+points[0]["_modal"]["datasetLabel"]);
}
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
}]);
If i click on bar 28 i am not getting the value 2016, because points array in onclick function return 2 objects on for each stack and i am unable to figure out how to get value 2016 as there is no flag to indicate which bar was clicked upon
The second argument passed to your onclick callback contains array of active elements and each item in it contains _datasetIndex and _index
array[1]
[Element]
_datasetIndex:0
_index: 0
Using these values you can obtain the value you need
$scope.onclick = function(event, elems)
{
var datasetIndex = elems[0]._datasetIndex;
console.log("evt " + $scope.series[datasetIndex]);
}
Please, refer to chartjs docs and this issue related to your problem
UPDATE
Looks like it is a little tricky with stacked bar charts. The solution is to find the closest clicked bar using Chart.helpers
$scope.$on('chart-create', function(event, instance){
// used to obtain chart instance
$scope.chart = instance.chart;
});
$scope.onclick = function(elements,e)
{
// helper function that translates an event to a position in canvas coordinates
var pos = Chart.helpers.getRelativePosition(e, $scope.chart);
// inRange is the function on the chart element that is used for hit testing
var intersect = elements.find(function(element) {
return element.inRange(pos.x, pos.y);
});
if(intersect){
alert('You clicked ' + $scope.labels[intersect._index] + ' ' + $scope.series[intersect._datasetIndex]);
}
}
Here is the working plunkr
My angular select isn't binding. I can tell the value is correct, but the select isn't updated. Why is not binding if the value is there?
<div ng-controller="MyController" ng-app>
<select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
<option value="">--Select a Color--</option>
</select>
<input type="button" value="submit" ng-click="Select()"></input>
function MyController($scope) {
$scope.colorList = [{
id: '1',
name: 'red'
}, {
id: '2',
name: 'blue'
}, {
id: '3',
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Here is a fiddle:
http://jsfiddle.net/ky5F4/23/
you need to change the id to a string when doing Select
$scope.Select = function () {
console.log('select fired');
var colorId = 1;
$scope.mySelection.colorId = colorId + "";
}
http://jsfiddle.net/bxkwfo0s/2/
next you should use a property of an object rather than just a scope variable, this will ensure proper model binding
ng-model="mySelection.colorId"
where the object could be something simple
$scope.mySelection = {colorId : colorId };
There are two errors with your code:
You are using colorList as your model in ng-options, but you are calling it datasets in your controller.
You use strings for the id, but set the $scope.colorId to a number.
Here is an updated fiddle changing ids to numbers and changing $scope.datasets to $scope.colorList
function MyController($scope) {
$scope.colorList = [{
id: 1,
name: 'red'
}, {
id: 2,
name: 'blue'
}, {
id: 3,
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Consider making your ng-model be an object, specifically one of the objects that are already in your $scope.colorList. If you do that you should be able to avoid the post-processing you're doing in the click handler.
So your select will look like this:
<select class="form-control" ng-model="selectedColor"
ng-options="color.name for color in colorList"></select>
One gotcha is that if you have an object in your controller that looks JUST LIKE your red object, like$scope.selectedColorObj = { id : '1', name:'red' } and set the select's ng-model to that option, it won't work. Angular will see that you're setting to the ng-model to an object that's not actually in your data source and add an extra option with value="?", so I use $filter in this case to grab the matching member of the array:
$scope.colorId = '3';
$scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];
See http://jsfiddle.net/ky5F4/92/
I´m trying to start this select with a predefined option selected. But i need to use as value an object like you can see in my code. I need to get an id in data.selected.
index.html
<div ng-controller="MyCtrl">{{data|json}}
<select ng-model="data.selected"
ng-options="p.id.another group by p.id.proxyType for p in proxyOptions" >
</select>
</div>
app.js
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.proxyOptions = [{
id: { proxyType: 'None', another: 1 }
}, {
id: { proxyType: 'Manual', another: 2 }
}, {
id: { proxyType: 'Automatic', another: 3 }
}];
$scope.data = {};
$scope.data.selected = $scope.proxyOptions[0].id; }
Fiddle
http://jsfiddle.net/fh01qndt/2/
New Fiddle based on Darren comments
http://jsfiddle.net/fh01qndt/5/
It works but i still need to specify the selected options this way:
$scope.data.selected = {proxyType: 'Manual', another: 2};
Use $scope.data.selected = $scope.proxyOptions[0] instead. Your way is creating another object which is different from your proxy options.
You just changed your questions code...Please don't do that.
Remove the .id from your assignment - ng-model will be the entire option object not just the Id
Here is your exact fiddle, but with the .id removed from your assignment.
JSFiddle
UPDATE
Ok, So having looked again at your code I have tried to understand what you're trying to achieve - i also noticed that I misread your original JSON object regarding the id - sorry; i saw id and assumed it referred to "an id" and not an object..
However, I think what you're trying to do is set your selected option in code, so you would need to search through the list and find your match, no?
If that's the case, then this fiddle shows ng-init() calling a function to do just that.
Any good to you? Another Fiddle, using ng-init
IF U NEED ONLY THE PLEAE CHECK THIS ONE
$scope.proxyOptions = {
'1': 'None',
'2': 'Manual',
'3': 'Automatic'
};
$scope.data.selected = '1';
<select ng-model="data.selected" ng-options="key as value for (key , value) in proxyOptions" >
</select>
do like this:
var myApp = angular.module('myApp', []);
function DataController($scope) {
$scope.proxyOptions = [{
id: { proxyType: 'None', another: 1 }
}, {
id: { proxyType: 'Manual', another: 2 }
}, {
id: { proxyType: 'Automatic', another: 3 }
}];
$scope.data.selected=$scope.proxyOptions[0];
}
see jsfiddle
Consider a set of items and users. Each user can have one or more items. The set of items can be quite big, but every user will normally have small amount of items.
app:
items:
item1:
name: 'table'
color: 'white'
createdAt: '2014-08-09T12:54:58.803Z'
item2:
name: 'macbook air'
color: 'silver'
createdAt: '2014-06-09T12:54:58.803Z'
item3:
name: 'firebase t-shirt'
color: 'yellow'
createdAt: '2014-07-09T12:54:58.803Z'
users:
user1:
items:
item1: true
item3: true
user2:
items:
item2: true
Given a user id, e.g. user1, I would like to display a list of user's items, sorted by createdAt:
yellow firebase t-shirt
white table
Every update on the Firebase server should be reflected in the app view.
I guess the view should look like this:
<div ng-repeat="item in items | orderBy:'createdAt'">
{{ item.color }} {{ item.name }}
</div>
But, I can't figure out an easy way to set up $scope.items.
This is what I currently do:
var userItemsRef = new Firebase(FIREBASE_ROOT + '/users/user1/items');
$scope.userItems = $firebase(userItemsRef).$asArray();
$scope.userItems.$loaded(function() {
$scope.userItems.$watch(setItems);
setItems();
});
function setItems() {
var promises = $scope.userItems.map(function(userItem) {
var itemRef = new Firebase(FIREBASE_ROOT + '/items/' + userItem.$id);
return $firebase(itemRef).$asObject().$loaded();
});
$q.all(promises).then(function(items) {
$scope.items = items;
});
}
Is this the best way to utilize AngularFire?
It would probably be simplest to store the items by user. So a structure like this:
/app/items/$user_id/$item_id/...
This would allow for the items belonging to a particular user to be retrieved like so:
var userId = 'user1';
var ref = new Firebase(FIREBASE_ROOT + '/items/' + userId);
$scope.items = $firebase(ref).$asArray();
If this isn't possible, because items are shared between users, it's probably simplest to use a join lib.
var userId = 'user1';
var userIndexRef = new Firebase(FIREBASE_ROOT + '/users/' + userId + '/items');
var itemsRef = new Firebase(FIREBASE_ROOT + '/items/');
var ref = Firebase.util.intersection(userIndexRef, itemsRef);
$scope.items = $firebase(ref).$asArray();
But generally, it's safest and simplest to take the first route.
I want to put a checkbox in the label of a Dojo TabContainer. I found an example here:
http://telliott.net/dojoExamples/dojo-checkboxTabExample.html
However, the example only shows html. I would like to do this programmatically. This is what I have so far:
function(response){
var json_response = JSON.parse(response);
var fields_dict = json_response['fields_dict'];
var names_dict = json_response['names_dict'];
var tc = new TabContainer({
style: "height: 495px; width: 100%;",
tabPosition: "left",
tabStrip: true
}, "report_tab_container");
for(var key in fields_dict) {
var content_string = '';
var fields = fields_dict[key];
for(var field in fields) content_string += '<div>' + fields[field][0] + fields[field][1] + '</div>';
var checkBox = new CheckBox({
name: "checkBox",
value: "agreed",
checked: false,
onChange: function(b){ alert('onChange called with parameter = ' + b + ', and widget value = ' + this.get('value') ); }
}).startup();
var tcp = new ContentPane({
//title: names_dict[key],
title: checkBox,
content: content_string
});
tc.addChild(tcp);
}
tc.startup();
tc.resize();
},
However, this doesn't work. When I load my page, the TabContainer doesn't show up. If I set the title of my ContentPane to something other than my check box, it works fine.
What am I doing wrong and how do I get the checkbox to appear in the TabContainer title?
This is what worked:
cb.placeAt('report_tab_container_tablist_dijit_layout_ContentPane_'+ i.toString(), "first");
I'm doing this blindly here, but comparing the example on your link to your code, I would say, add this before tc.addChild(tcp) :
checkBox.placeAt(tcp.domNode, "first");