Using variable model in Angular

Question

I have this schema for business_hours:

 business_hours: {
        sunday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        monday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        tuesday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        wednesday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        thursday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        friday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]},
        saturday: {closed: {type:Boolean, trim: true},
            timings: [{
                open: {type:Number, default: '', trim: true},
                close: {type:Number, default: '', trim: true}
            }]}
    },

I am creating UI for above schema. So I am using ng-repeat for this purpose. I have defined an array week in my controller:

 $scope.week = ['Sunday','Monday' ,'Tuesday' ,'Wednesday' ,'Thursday' ,'Friday', 'Saturday'];

And HTML code is as follows:

<div class="row-fluid span12">
            <small>Timings</small>
        </div>
        <div ng-repeat="w in week">

        <div class="row-fluid pushTop10px">
            <div class="row-fluid span4">
                <small>{{w}}</small>
            </div>
            <div class="row-fluid span8 " >
                <div class="row-fluid span2" style="text-align:center; margin-top:4px;">
                    <small>Open</small>
                </div>
                <div class="row-fluid span2">             
                    <select class="span12" ng-model="outlet.business_hours.timings.w.open.hour">
                    <option value="1"><label>00</label></option>
                    <option value="2"><label>01</label></option>

This code goes on. Basically there are four things: open hour, open minute, close hour, close minute. w in week is working when I am simply printing it. But when I am using it in model, it doesn't work. I have also tried following code:

outlet.business_hours.timings.{{w}}.open.hour
outlet.business_hours.timings.week[w].open.hour
outlet.business_hours.timings.week($index).open.hour

How can it be done?

check out this stackoverflow.com/questions/4255472/… and don't forget that javascript is case sensitive. — ysf
– ysf, Commented Oct 3, 2014 at 8:54

aitorllj93 · Accepted Answer · 2014-10-03 09:12:31Z

1

Could you try

outlet.business_hours[w].timings[0].open(hour)

Where hour is a property in scope

Additionaly, Sunday != sunday ;)

Could you provide more code?

answered Oct 3, 2014 at 9:12

aitorllj93

4654 silver badges11 bronze badges

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

Comments

timsmiths · Accepted Answer · 2014-10-03 08:50:09Z

0

Here's how:

 outlet.business_hours[w].timings[0].open.hour

answered Oct 3, 2014 at 8:50

timsmiths

1676 bronze badges

5 Comments

rishiag Over a year ago

Not working. Error is "Cannot read property 'open' of undefined"

timsmiths Over a year ago

Are you sure 'open' is defined? What does {{ outlet.business_hours['sunday'] }} output?

timsmiths Over a year ago

Have you made changes suggested by @ysf?

ysf Over a year ago

name of the day in variable w is capitalized. however, name of days in business_hours are lowercase. since javascript is case-sensitive business_hours['sunday'] is different than business_hours['Sunday']. either make $scope.week values lowercase or capitalize property names of business_hours object.

timsmiths Over a year ago

Also, where does hour come from? It's not defined in your schema?

Collectives™ on Stack Overflow

Using variable model in Angular

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related