/angularjs/

Angular Material. Simple configuration list.

2015-11-24 00:05:10

What you have to have to create such a list


<html lang='"en"' ng-app='"app"'>
...
 <link href='"lib/angular-material/angular-material.min.css"' rel='"stylesheet"'/>
...
<!-- Angular Material Dependencies -->
<script src='"lib/angular/angular.min.js"'></script>
<script src='"lib/angular-animate/angular-animate.min.js"'></script>
<script src='"lib/angular-aria/angular-aria.min.js"'></script>
<script src='"lib/angular-material/angular-material.min.js"'></script>
<script src='"app/app.js"'></script>

first we have to add ngMaterial to our app.js

it can be something like this

.module('app', [
    'ngMaterial'
])

next step is theme configuration

.config(function ($mdThemingProvider) {
    $mdThemingProvider
        .theme('default')
        .primaryPalette('red')
    ;
})

icon provider configuration

.config(function ($mdIconProvider) {
    $mdIconProvider
        .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
        .defaultIconSet('img/icons/sets/core-icons.svg', 24);
})

as you see here we have config section for mdIconProvider

simple controller with mock data

.controller('ConfigurationCtrl', function ($scope) {

    $scope.springBootApps = [
        {name: 'Article', wanted: true},
        {name: 'Posts', wanted: false},
        {name: 'Users', wanted: false},
        {name: 'Configuration', wanted: true}
    ];
    $scope.settings = [
        {name: 'Lazarus', extraScreen: 'Wi-fi menu', icon: 'undo', enabled: true},
        {name: 'Notification', extraScreen: 'Bluetooth menu', icon: 'communication:message', enabled: false},
    ];

})

Time for html

<div flex="" layout='"row"' ng-controller='"ConfigurationCtrl"'>
<div flex="" id='"content"' layout='"column"'>
<section 10px&quot;="" class='"md-whiteframe-6dp"' layout='"column"' style='"margin:'>
<md-list ng-cloak="">
<md-subheader class='"md-no-sticky"'>Spring Boot Applications</md-subheader>
<md-list-item in="" ng-repeat='"app' springbootapps&quot;="">
<p> {{ app.name }} </p>
<md-checkbox class='"md-secondary"' ng-model='"app.wanted"'></md-checkbox>
</md-list-item>
<md-divider></md-divider>
<md-subheader class='"md-no-sticky"'>Schedule tasks</md-subheader>
<md-list-item in="" ng-repeat='"setting' settings&quot;="">
<md-icon md-svg-icon='"{{setting.icon}}"'></md-icon>
<p> {{ setting.name }} </p>
<md-switch class='"md-secondary"' ng-model='"setting.enabled"'></md-switch>
</md-list-item>
</md-list>
</section>
</div>
</div>