Angular: bootstrap coIumns (making a class for it, but it is not complete)

5 views
Skip to first unread message

Claudiu

unread,
Sep 15, 2017, 5:29:38 AM9/15/17
to Angular and AngularJS discussion

I am trying to implement bootstrap columns on an already existing webpage. My controllers look like this:

JS:

app.controller("sportsCtrl", function($scope) {
$scope.applySettings({
mainHeader: "Sports",
mainTitle: "Sports List",
mainImg: "sports.jpg",
mainText: "",
sections: [
//text

initialized with these settings:

var Settings = {
mainTitle: '',
mainImg: '',
mainText: '',
sections: []
};

and mapped in the following way:

var mappings = {
mainTitle: setMainTitle,
mainImg: setMainImg,
sections: processSection,
}

Now I am trying to implement bootstrapped columns:

var mapSections = {
sectionColWidthMd: setColumn,
sectionColWidthSm: setColumn,
sectionColWidthXs: setColumn,

function setColumn(value, key, obj) 
{
var screenSize = key.replace('section', '').replace('ColumnWidth', '');
var newClass = 'col-' + screenSize + '-' + value + ' ';

obj[responseClass] += newClass;
return;
}

function processSection(sections) {
$.each(sections, function(i, obj) {
if (typeof(obj) != 'object') { return false; }

$.each(obj, function(key, value) {
var theMap = mapSections[key];
if (theMap) {
obj[key] = theMap(value, key, obj);
}
});
});

return sections;
}

And this is the html view: (partial)

div class="row basic-page__body">
<div class="basic-page__section" ng-class="{responseClass: responseClass}" 
ng-repeat="section in settings.sections track by $index">
<div class="basic-page__section-text" ng-if="isString(section)" ng-class="
{'basic-page__sectiontext--indent': section.indentText}">{{ section }}</div>
<div class="basic-page__section-header" ng-if="section.sectionHeader">{{ 
section.sectionHeader }}</div>
<div class="basic-page__section-sub-header" ng-
if="section.sectionSubHeader">{{ section.sectionSubHeader }}</div>
</div>

So now what I want to do is to be able to format it like this:

sectionText: 
"text....."
sectionColWidthMd: "4",
sectionColWidthSm: "6",
sectionColWidthXs: "12",
sectionSubHeader: "This is a subheader",
List: [
"First item",
"Second item",

but adding the SectionColWidth class in my template does not format anything.

Help would be appreciated.

Reply all
Reply to author
Forward
0 new messages