Develop Reference

How to restrict data changes of a variable in multiple variables which using the same data?

I am facing an issue with object property changes in angular JS.
For example I have an array of objects.
$scope.ex1 = [{"name":"Ethel Price","gender":"female","company":"Enersol"},
{"name":"Claudine Neal","gender":"female","company":"Sealoud"},
{"name":"Beryl Rice","gender":"female","company":"Velity"},
{"name":"Wilder Gonzales","gender":"male","company":"Geekko"},
{"name":"Georgina Schultz","gender":"female","company":"Suretech"},
{"name":"Carroll Buchanan","gender":"male","company":"Ecosys"},
{"name":"Valarie Atkinson","gender":"female","company":"Hopeli"},
{"name":"Schroeder Mathews","gender":"male","company":"Polarium"},
{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}]
I have a form where I show the data in a list format to display it am using angular-datatable.
When a user clicks on list items am storing that particular object in an array.
For example the user selects two items from the above list am keeping that two objects in other variable like below:
$scope.selected = [{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}];
The issue is when I change some properties in $scope.selected the changes are reflecting automatically in $scope.ex1 object.
Like below:
$scope.selected[0].name = "Rakesh rekala"
The above change will reflect in $scope.ex1 array to that particular item.
How to restrict this scenario is there any way to solve this.

Javascript objects are mutable, use angular.copy to deep copy your source object array to a variable and then use the variable to push objects into the selected array

You should change your push line.
$scope.selected.push($scope.ex1[0]);
$scope.selected[0].name = "Test"; //ex1 will change
$scope.selected.push(angular.copy($scope.ex1[1]));
$scope.selected[1].name = "Test2"; //It's ok!
http://jsfiddle.net/ms403Ly8/124/

How to get all the values from a FilteringSelect in dojo?

I have a FilteringSelect called select, and the values are being added from different places. At one point of time, I wanted to access all the values from the FilteringSelect.
In order to get a single value, I can use select.get('value'). But I wanted to have all the values in an array. In jQuery, we can do something like below,
var values = $('#select').val(); //returns an array
So, how to do the same in dojo?

If you want to get the list of 'options' in the FilteringSelect you can inspect the data element of the store.
e.g.
define([dijit/registry'], function(registry) {
// this will return an array of options
registry.byId('select').get('store').data;
});
happy coding.

Two way binding with AngularJS select for a child object

I have an angular form with this select element:
<select ng-model="expense.category" ng-options="category.code for category in categories"></select>
where expense is my object to create/edit in the form and expense.category points to child object category (with properties "id" and "code"), which is to be selected by this control.
This all works perfect for creating new expenses - category gets saved just the way it should be. When loading an expense for editing everything is fine also - the expense has its category in the controller. But on the form the select does not get pre-filled with the correct category-entry, it is empty, although all the categories are loaded into the select element. So binding works only one way (from form to model) but not in the other way (from model to form) for the select field. All the other fields (properties of expense) get filled correctly into the edit form though.
Any ideas how to solve this?

The expense.category model must be an existing item in the categories array.
What you can do to make this happen is to search for the right item in the array (with the help of the code property) and replace your existing copy of the category with the reference in the categories array.
This could be done like this:
myApp.controller('ctrl', function($scope) {
$scope.categories = [{code: 'sport'}, {code: 'music'}, {code: 'culture'}];
$scope.expense = {category: {code: 'sport'}};
function replaceWithReference(expense) {
var code = expense.category.code;
for(var i=0; i < $scope.categories.length; i++) {
if($scope.categories[i].code === code) {
expense.category = $scope.categories[i];
return;
}
}
}
replaceWithReference($scope.expense);
});
Here is the working jsfiddle-demo

Comparison between ng-options and ng-model is done by reference, not value. I suspect your expense.category, when loaded, is a separate entity from the ones in the categories array.
You should probably populate your expense.category with a category from categories.
Another option would be to replace the select with a dropdown. This would represent a bit more code (you would have to handle the binding yourself on the ng-click) but would give you more control on comparison and display.

ExtJS4 get a member of a store

How can I get the element id of an item in a store range on ExtJS4 based on a property of the item? For instance, I am getting the store as follows:
var combobox = Ext.ComponentQuery.query('[xtype=mycombobox]')[0];
var items = combobox.getStore().getRange();
I want to jump to the correct item in the combobox based on a productid that a user selects elsewhere:
combobox.select(elementid);
I am just missing the logic that lets me say
elementid = items.getWhere('prodid', 'productid'); // Or however its actually done.

This is what I ended up coming up with, which actually required two seperate calls. Not sure if this is the most efficient way to do it but it seems to work.
First, I need to get the model that has a productid that equals value:
var model = combobox.getStore().findRecord('productId', value);
Then, I need to figure out what the index of that model is in the overall store:
var index = combobox.getStore().indexOf(model);
Then I can take the index and apply it to back to the combobox:
combobox.select(index);

JQuery: Append to listbox - setting JSON data as value

I'm trying to append all the selected items from listbox 1 to listbox 2, and it's working fine. The problem is that I want to set the item values of the listitems on listbox 2 to an ID i get from JSON.
I have the ID from JSON, but I'm not sure how to set the values when I use appendTo.
Here's the code I'm using now, when the values is set to "0":
$('#ListBox1 option:selected').appendTo('#ListBox2');
I think I have to do something like this:
var numberOfSelectedItems = $('#ListBox1 option:selected').length;
for(int i = 0; i < numberOfSelectedItems; i++)
{
var ID = data.array[i].ID; //This is the ID value from JSON.
//TODO: Set the ID as value on each selected item
}
Please help =)

You should be able to set use the .attr() jQuery function to set the id on each item, perhaps combined with using Javascript's helpful array functions to the next ID in the list.
Something like...
$('#ListBox1 option:selected')
.attr('id', data.array.shift())
.appendTo('#ListBox2');
JQuery allows you to chain together successive operations on a given selection, so you can set the id attribute on each before appending it to your second list.
data.array.shift just removes and returns the first item in the array, so each time this is called (for each list item) you'll get the next id assigned to the list item being processed.
Of course, if you need use data.array afterwards you may need to copy it first.