String concatenation in angularjs with ionic app

Question

I'm new to both angular js & ionic. I'm using https://github.com/rajeshwarpatlolla/ionic-datepicker Datepicker for one fo my android app. Currently, stuck one point.

What I need is dynamically build the datepicker on the page from data obj. In simple case I know how to use the Datepicker but, at the time of dynamic generation of Datepicker, I don't know how to do.

In normal case following ionic datepicker directive code, I'm using & it's working fine.

<ionic-datepicker input-obj="datepickerObject">
    <button class="button icon-left ion-calendar"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>

But, in case of dynamic generation, it needs to be something like this -

// For Start_Date
<ionic-datepicker input-obj="'datepickerObject_Start_Date">
    <button class="button icon-left ion-calendar">
        {{datepickerObject_Start_Date.inputDate | date:datepickerObject_Start_Date.dateFormat}}
    </button>
</ionic-datepicker>

// For End_Date
<ionic-datepicker input-obj="'datepickerObject_End_Date">
    <button class="button icon-left ion-calendar">
        {{datepickerObject_End_Date.inputDate | date:datepickerObject_End_Date.dateFormat}}
    </button>
</ionic-datepicker>

I'm getting those Start_Date & End_Date in "fieldRowKey" javascript variable. But, I can't able to understand how to concate that in run time.

Ex -
"'datepickerObject_'+fieldRowKey" 
OR 
"{{'datepickerObject_'fieldRowKey}}"

I know it's just matter of string concatenation and I tried in lot many way but, not getting teh right way to do.

Need some guidance.

Thanks

Code updated

Rather than, making manipulation in string I've made a controller function which will do the same thing & return back the require string. Here is the code -

<ionic-datepicker input-obj="getDatePickerObj(fieldRowKey)">
    <button class="button icon-left ion-calendar">
        {{getDatePickerObj(fieldRowKey).inputDate | date:getDatePickerObj(fieldRowKey).dateFormat}}
    </button>
</ionic-datepicker>

Controller function is -

// Method for creating datepicker obj string
$scope.getDatePickerObj = function(datePickerName){
    var datePickerObjStr = 'datepickerObject_'+datePickerName;
    console.log('datePickerObjStr : '+datePickerObjStr);

    return datePickerObjStr;
}

But, Still no luck -.-

Got it. I was doing wrong in the getDatePickerObj() function. Here is the updated version.

// Method for creating datepicker obj string
$scope.getDatePickerObj = function(datePickerName){
    var datePickerObjStr = 'datepickerObject_'+datePickerName;
    console.log('datePickerObjStr : '+datePickerObjStr);

    return $scope[datePickerObjStr];
}

It's working fine now.

andyhasit · Accepted Answer · 2016-01-25 05:04:26Z

1

I think you're going down the wrong path by trying to concatenate the variable names at run time.

I'm not exactly clear what exactly you're trying to do, but hopefully the following will point you in the right direction:

In your controller:

$scope.getDate = function(fieldRowKey) {
    return ...; //return the corresponding date object
};

And in your html:

<ionic-datepicker input-obj="getDate(fieldRowKey)">

answered Jan 25, 2016 at 5:04

andyhasit

15.5k7 gold badges54 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Suresh Over a year ago

@AndyHaslt - Thanks for the quick response. I updated my Directive like this...

<ionic-datepicker input-obj="getDatePickerObj(fieldRowKey)"> 									<button class="button icon-left ion-calendar"> 										{{getDatePickerObj(fieldRowKey).inputDate | date:getDatePickerObj(fieldRowKey).dateFormat}} 									</button> 								</ionic-datepicker>

But, don't still something is broken somewhere & ut's not working.

Suresh Over a year ago

Also, created following function in Controller file -

$scope.getDatePickerObj = function(datePickerName){         var datePickerObjStr = 'datepickerObject_'+datePickerName;         console.log('datePickerObjStr : '+datePickerObjStr);         return datePickerObjStr;     }

arainone Over a year ago

@mi6 could you please edit your question instead of posting code in the comment.

Suresh Over a year ago

@AndyHaslt - Got the solution. updated the function getDatePickerObj() . Now it's working. Thanks for showing the right way to solve the problem.

andyhasit Over a year ago

@mi6crazyheart I think your getDatePickerObj() should be returning an objetc, not a string. But if this answer works for you, please mark it as accepted so the question is considered "answered".

Collectives™ on Stack Overflow

String concatenation in angularjs with ionic app

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related