Firstly, thanks to Stack Overflow community for continued support for both experts and newbie's like me. I have recently started with Full Stack Dev on Mean Stack.
Currently, I am trying to create a mock-up for required UI before I dive into backed development.
I am using an AngularJS controller to display the required contents in an accordion. The accordion body includes some text values, and angular materialistic switch buttons to change value of 3 different parameters in data values.
I referred here for switch buttons config: https://www.tutorialspoint.com/angular_material/angular_material_switches.htm, and was successfully able to replicate the same. Now that I am trying to integrate this into my original view, it seems like switch buttons are created without any errors but aren't visible. I probably have some angular controller issue, which maybe causing the problem.
Here is Codepen: https://codepen.io/shubhammakharia/pen/Ngpgje
HTML:
<div class="mycontainer" ng-controller="MainController" ng-cloak>
<div class="col-xs-12 col-sm-6">
....
<div layout="column" ng-cloak >
<md-switch ng-model="item.sfs" aria-label="SFS Switch">
SFS {{ data.switch1 }}
</md-switch>
<md-switch ng-model="item.BOPIS" aria-label="SBOPIS Switch" ng-true-value="'true'" ng-false-value="'false'" class="md-warn">
BOPIS (md-warn): {{ data.switch2 }}
</md-switch>
<md-switch ng-disabled="true" aria-label="BOSTS Switch" ng-model="item.BOSTS">
BOSTS (Disabled)
</md-switch>
</div>
</div>
var app = angular.module('ksStore', ['ui.bootstrap']);
app.controller('MainController',
function ($scope) {
$scope.items = [
{
name: "item1",
storeid:'1',
desc: "DSW Easton",
phone:'+1-123-456-7890',
address:'Easton, Columbus, OH',
SFS: true,
BOPIS: false,
BOSTS: true
}
];
$scope.default = $scope.items[0];
$scope.message = 'false';
$scope.onChange = function(state) {
$scope.message = state;
};
});
app.controller('ItemController', ['$scope', function (scope) {
scope.$parent.isopen = (scope.$parent.default === scope.item);
scope.$watch('isopen', function (newvalue, oldvalue, scope) {
scope.$parent.isopen = newvalue;
});
}]);
