Passing multiple data items through checkbox - apache-flex

Question

I have 2 checkbox repeaters: The first gets populated w/ an ArrayCollection & the second gets populated w/ the "Label" and "Data" fields selected from the first checkbox....how do I pass another item to the second checkbox? In the code below, I am currently only passing the "key" and "val" fields & would like to pass "another" field.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="updateOlder();"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.events.MouseEvent;
import mx.controls.CheckBox;
import mx.core.Repeater;
[Bindable]
public var older:ArrayCollection = new ArrayCollection ([]);
[Bindable]
public var newer:ArrayCollection = new ArrayCollection ([]);
private function updateOlder():void{
older.addItem({key:'item1',val:{ name:'desc1' ,another:'another1'}});
older.addItem({key:'item2',val:{ name:'desc2' ,another:'another2'}});
older.addItem({key:'item3',val:{ name:'desc3' ,another:'another3'}});
}
private function updateNewer(evt:MouseEvent):void {
var tmpBox:CheckBox = evt.target as CheckBox;
if(tmpBox.selected) {
// add item to array
newer.addItem({key:tmpBox.label, val:tmpBox.data.val, another:tmpBox.data.another});
}
else {
// remove item from array
var newArrIndex: int = getArrayElementIndex(newer, older[tmpBox.instanceIndex]);
if(newArrIndex != -1){
newer.removeItemAt(newArrIndex);
}
}
newer.refresh();
}
private function getArrayElementIndex(arr:ArrayCollection, elementValue:Object):int{
for (var retInd: int = 0; retInd < arr.length; retInd++) {
if (arr[retInd]['key'] == elementValue['key'] && arr[retInd]['val']['name'] == elementValue['val']['name']
&& arr[retInd]['val']['another'] == elementValue['val']['another']) {
return retInd;
}
}
return -1;
}
]]>
</fx:Script>
<mx:HBox width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Repeater id="oldRepeater" dataProvider="{older}">
<mx:CheckBox color="black" fontFamily="Arial" fontSize="14"
label="{oldRepeater.currentItem.key}"
data="{oldRepeater.currentItem.val}"
click="updateNewer(event);"
/>
</mx:Repeater>
</mx:VBox>
<mx:VBox width="100%" height="100%">
<mx:Repeater id="newRepeater" dataProvider="{newer}">
<mx:CheckBox color="red" fontFamily="Arial" fontSize="14"
label="{newRepeater.currentItem.key}"
data="{newRepeater.currentItem.val}"
/>
</mx:Repeater>
</mx:VBox>
</mx:HBox>
</mx:Application>

Answer 1

I'm not sure what exactly you want to accomplish, but it seems to me the easiest way to go is to make the Object you assign to the "val" field on each of the ArrayCollections contain both variables, i.e.
older.addItem({ key:'item1', val:{ name:'desc1' ,another:'another1'} });
and retrieve those values later:
private function getArrayElementIndex(arr:ArrayCollection, elementValue:Object):int{
for (var retInd: int = 0; retInd < arr.length; retInd++) {
if (arr[retInd]['key'] == elementValue['key'] && arr[retInd]['val']['name'] == elementValue['val']['name']
&& arr[retInd]['val']['another'] == elementValue['val']['another']) {
return retInd;
}
}
return -1;