How to avoid using multiple "ng-repeat" directives in Angular while returning a split array?

Question

I am interested in creating a form with a specific function. The form will have multiple criterias. When a criterion is met an associated price will display. In this case, the user has an option of selecting sets of days and then times. I have hit a stumbling block in that I can filter times by a date range, but this only returns an array ("['4:55pm-5:25',..]). I need this array to be split and used for a new set of option values. See below for an image example of the problem. Also, I am trying to avoid using one ng-repeat inside of another ng-repeat as this is non-applicable with the select form type. I've tried using another function and using ng-repeat="time in times.times" without any luck.

JS:

$scope.times = [
    {'day': 'Monday & Wednesday', 'dates': ['8/10-8/31', '9/2 - 9/30', '10/5- 10-28'], 'times': ['4:55pm - 5:25pm', '5:40pm - 6:10pm', '6:20pm - 6:50pm'], 'price': '46'},
    {'day': 'Tuesday & Thursday', 'dates': ['8/11-8/27'], 'times':['4:55pm - 5:25pm', '5:40pm - 6:10pm', '6:20pm - 6:50pm'], 'price': '39'},
    {'day': 'Tuesday & Thursday', 'dates': ['9/1-9/29', '10/1-10/29'], 'times':['4:55pm - 5:25pm', '5:40pm - 6:10pm', '6:20pm - 6:50pm'], 'price': '59'},
    {'day': 'Saturday', 'dates': ['9/12 - 11/21 No Class Oct 31'], 'times':['11:00am - 11:30am', '11:35am-12:00pm'], 'price': '65'}
]; 

$scope.concat = function()
{
    var concat = [];
    var fullDates = []
    for (var z = 0; z<= top.length - 1; z ++)
    {
        var dates = top[z].dates;
        var day = top[z].day; 

        //return dates;

        for(var i = 0; i<=dates.length - 1; i++)
         {
            //concat.push(day.dates[i]);
            concat.push(day + ' ' + dates[i]);
            fullDates.push(dates[i])            
         }
        $scope.fullDates = fullDates;

    }
    return concat; 
};

HTML:

<select name="days" id="#preschool" ng-model="selectedgroup">
        <option ng-repeat="days in concat() track by $index" value="{{fullDates[$index]}}">
        {{days}}
        </option>
    </select>
    Select A Time:
    <select name="times" id="times" ng-model="selectedTime">
    <option ng-repeat="time in times| filter: {dates: selectedgroup}" value="{{$index}}">
        {{time.times}}
    </option>
    </select>

What do you mean by "non-applicable with the select form type"? For the options in <select> tag you should use ng-options. — muenchdo
– muenchdo, Commented Sep 23, 2015 at 19:55
@muenchdo I have used ng-options but this does not help me to get further. I have it set as ng-options="time.times as time.times for time in times" and this won't allow me to iterate through each array inside of the array of the object. — Coded Container
– Coded Container, Commented Sep 24, 2015 at 13:38

Coded Container · Accepted Answer · 2015-09-24 14:40:09Z

I have discovered that you can also add the key into the new object that you are creating (with the concat function) by passing in an object with an index property value. This way you do not have to worry about rewriting your JSON data. Then you can use this new index with the dates to select the specific object.

HTML:

<select name="days" id="#preschool" ng-model="selectedgroup">
        <option ng-repeat="days in concat() track by $index" value="{{days.index}}">
        {{days.day}}
        </option>
    </select>
    Select A Time:
    <select name="times2">
        <option value="" ng-repeat="time in times[selectedgroup].times">
            {{time}}
        </option>

JS:

$scope.concat = function()
{
    var concat = [];
    var fullDates = []
    for (var z = 0; z<= top.length - 1; z ++)
    {
        var dates = top[z].dates;
        var day = top[z].day; 
        //return dates;
        for(var i = 0; i<=dates.length - 1; i++)
         {
            concat.push({'day': day + ' ' + dates[i] , 'index':z}); 
         } 
    }
    return concat; 
};
});

Collectives™ on Stack Overflow

How to avoid using multiple "ng-repeat" directives in Angular while returning a split array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related