Sunday, August 31, 2014

ng-select ng-options

I can see the potential of the AngularJS modifications to the SELECT element. I see the advantages of having an object reference when a user has made a choice. It would simplify further processing choices. It's all great, well until you hit the documentation.

  • for array data sources:
    • label for value in array
    • select as label for value in array
    • label group by group for value in array
    • select as label group by group for value in array track bytrackexpr
  • for object data sources:
    • label for (key , value) in object
    • select as label for (key , value) in object
    • label group by group for (key, value) in object
    • select as label group by group for (key, value) in object
Where:
  • array / object: an expression which evaluates to an array / object to iterate over.
  • value: local variable which will refer to each item in the array or each property value of object during iteration.
  • key: local variable which will refer to a property name in object during iteration.
  • label: The result of this expression will be the label for  element. Theexpression will most likely refer to the value variable (e.g. value.propertyName).
  • select: The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value.
  • group: The result of this expression will be used to group options using the DOM element.
  • trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).
Hunh? What if you simply want a value for each option, you know, like you used to get back in the old days? Here is our options

$scope.unitOptions =[{VALUE:"CRB11",LABEL:"20FT CONTAINER"},{VALUE:"CRB12",LABEL:"40FT CONTAINER"},{VALUE:"CRB3",LABEL:"CARTONS"},{VALUE:"CRB6",LABEL:"ENVELOPES"},{VALUE:"FRT25",LABEL:"ITEMS"},{VALUE:"CRBx2",LABEL:"ITEMS IN THE LOT"},{VALUE:"CRBx1",LABEL:"LITRES"},{VALUE:"CRB5",LABEL:"PALLETS"},{VALUE:"CRB14",LABEL:"PALLETS OR SKIDS"},{VALUE:"CRB4",LABEL:"SKIDS"},{VALUE:"FRFCB16",LABEL:"SPA"}];
So item_units will receive the opt.VALUE rather than a reference to an object. From the above "opt.VALUE as opt.LABEL for opt in unitOptions" matches the form "select as label for value in array" from the documentation. I read that as ;
opt.VALUE is the id for the displayed opt.LABEL for each of the opt objects in unitOptions 
Not complaining, Angular is a great way of organizing the frontend. I can see why they wrote it the way they did, but it doesn't bring us any closer to literate programming.

No comments: