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);
}

• 200_success: Don't do that at all using JavaScript. Use CSS media queries to set display: none on certain elements when the browser is too narrow.
• Leon Gaban: Well, I already have CSS to hide the columns... the vs.streams however is a model in Angular. When the selected key is true, then that is reflected in the markup. The data shows up.. not just showing an empty column if that makes sense. Sorry I should have added that to the question, just did...

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); 
}