Change part of a label in Titanium or Alloy / Appcelerator - titanium

Question

I want to change part of a label dynamically.
This is my code:
<View top="0" height="115">
<Label id="lblMiles" left="15" textAlign="right" right="15" top="0" height="55">
{distance} Miles
</Label>
</View>
I want to be able to change the {distance} portion dynamically.
However currently I can only change the whole thing like this:
$.lblMiles.text = "10 Miles";
In HTML we normally use a span tag like so:
<div id="lblMiles"><span id="distance"></span> Miles</div>
How can I do something similar in Alloy?

Answer 1

If it were up to me, i wouldn't worry about updating only half the label, just reset the whole text,
$.lblMiles.text = "10 Miles";
// and then later on to update it to 15
$.lblMiles.text = "15 Miles";
if for some reason you need to update only half, then you could use two labels and put them in a view with layout set to horizontal.
something looking like this :
<View top="0" height="115">
<View height="Ti.UI.SIZE" width="Ti.UI.SIZE" layout="horizontal">
<Label id="dynamicLabel" />
<Label id="lblMiles" > Miles</Label>
</View>
</View>
and then in your code, just update the dynamic label setting the actual value:
$.dynamicLabel.text = "15";
Now to position the labels on the screen you should play on the attributes of their container's left, right, top and bottom.

Answer 2

You can do this by two three ways
Have two different labels and set it from controller
You can use attributed strings as well.
More reference is here http://docs.appcelerator.com/platform/latest/#!/guide/Attributed_Strings