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 http://stackoverflow.com/questions/4255472/javascript-object-access-variable-property-by-name-as-string and don't forget that javascript is case sensitive. — ysf, Oct 03 '14 at 08:54

score 1 · Accepted Answer · answered Oct 03 '14 at 09:12

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 03 '14 at 09:12

aitorllj93

434
3
11

score 0 · Answer 2 · answered Oct 03 '14 at 08:50

0

Here's how:

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

answered Oct 03 '14 at 08:50

timsmiths

167
6

Not working. Error is "Cannot read property 'open' of undefined" – rishiag Oct 03 '14 at 08:55
Are you sure 'open' is defined? What does {{ outlet.business_hours['sunday'] }} output? – timsmiths Oct 03 '14 at 09:06
Have you made changes suggested by @ysf? – timsmiths Oct 03 '14 at 09:12
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. – ysf Oct 03 '14 at 09:13
Also, where does `hour` come from? It's not defined in your schema? – timsmiths Oct 03 '14 at 09:17

Using variable model in Angular

2 Answers2