CODEWITHSUNDEEP
htmlangularjsangular-material
shubhammakharia
shubhammakharia

Reputation: 147

AngularJS - Angular Material: HTML toggle button created but not displaying in HTML accordion

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

            }]);

Upvotes: 0

Views: 655

Answers (1)

Edric
Edric

Reputation: 26851

The order of the script elements matter. You have to put bootstrap script after angular script element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!--Added these as a part of toggle switches-->
<!-- Update angular-material to 1.1.4-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
<!-- However, angular-material doesn't support angular 1.6.x; using 1.5.11 instead -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<!-- End of toggle switches scripts-->

Updated codepen (Also updated angular versions to latest supported by angular-material)

Upvotes: 1

Related Questions