Adjusting Angular.js model based on browser width

Question

I have an Array of 5 objects, some key values need to be changed based on the browser width. ie: 5 cols, 4 cols, 3 cols or 2.

vs.streams is an Array which is tied to a AngularJS model. When the selected value is true, that data will be called via an API And displays in their appropriate columns.

function checkBrowserWidth() {
    var w = window.innerWidth;
    console.log('w = ', w);

    toggleStreams();

    if (w > 1400) {
        console.log('5 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: true,  previous: true },
            { name: 'Forums',         value: 'forums',    selected: true,  previous: true }
        ];
    } else if (w > 1200 && w < 1400) {
        console.log('4 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: true,  previous: true },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    } else if (w > 1100 && w < 1200) {
        console.log('3 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: true,  previous: true },
            { name: 'Blogs',          value: 'blogs',     selected: false, previous: false },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    } else if (w < 1100) {
        console.log('2 columns');
        vs.streams = [
            { name: 'Twitter',        value: 'twitter',   selected: true,  previous: true },
            { name: 'News',           value: 'news',      selected: true,  previous: true },
            { name: 'Financial News', value: 'financial', selected: false, previous: false },
            { name: 'Blogs',          value: 'blogs',     selected: false, previous: false },
            { name: 'Forums',         value: 'forums',    selected: false, previous: false }
        ];
    }
}

Below is my first attempt, however I feel that there is an even better, more optimized and efficient way to do this.

function toggleStreams(cols) {
    switch(cols) {
        case '5':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = true;
            vs.streams[3].previous = true;
            vs.streams[4].selected = true;
            vs.streams[4].previous = true;
            break;

        case '4':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = true;
            vs.streams[3].previous = true;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;

        case '3':
            vs.streams[2].selected = true;
            vs.streams[2].previous = true;
            vs.streams[3].selected = false;
            vs.streams[3].previous = false;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;

        case '2':
            vs.streams[2].selected = false;
            vs.streams[2].previous = false;
            vs.streams[3].selected = false;
            vs.streams[3].previous = false;
            vs.streams[4].selected = false;
            vs.streams[4].previous = false;
            break;
    }

    console.log('vs.streams = ', vs.streams);
}

Answer 1

You could shorten the toggleStreams function:

function toggleStreams(cols) {
    vs.streams[2].selected = vs.streams[2].previous = (cols >=3);
    vs.streams[3].selected = vs.streams[3].previous = (cols >=4);
    vs.streams[4].selected = vs.streams[4].previous = (cols >=5);      
}