Angular Material Sample

Using the angular material library

by pbespechnyi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.js"></script>
<div ng-app='home'>
    <!-- App goes here -->
    <md-content layout-padding ng-controller="MainCtrl as mainCtrl">
         <h3 class="md-headline">My Fruits</h3>

        <div layout="row">
            <div flex="15">
                <md-button class="md-raised md-primary" ng-click="removeChecked()">Remove</md-button>
            </div>
            <div flex="85">
                <md-input-container>
                    <label>Search</label>
                    <input ng-model="searchText">
                </md-input-container>
            </div>
        </div>
        <div>
            <md-list>
                <md-list-item ng-repeat="fruit in fruits | filter:searchText">
                    <md-checkbox class="md-primary" ng-click="toggleChecked(fruit)"></md-checkbox>{{fruit}}</md-list-item>
            </md-list>
        </div>
    </md-content>
</div>

JavaScript

angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);

angular.module('home').config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('pink')
        .accentPalette('grey');
});

angular.module('home').controller('MainCtrl', function ($scope) {
    $scope.fruits = [
        'apple',
        'banana',
        'orange',
        'mango',
        'kiwi',
        'pineapple',
        'lemon',
        'blueberry',
        'strawberry'];

    $scope.checked = [];

    $scope.toggleChecked = function (item) {
        var index = $scope.checked.indexOf(item);
        if (index == -1) {
            $scope.checked.push(item);
        } else {
            $scope.checked.splice(index, 1);
        }
    };

    $scope.removeChecked = function () {
        $scope.checked.map(function (item) {
            var index = $scope.fruits.indexOf(item);
            $scope.fruits.splice(index, 1);
        });
        $scope.checked = [];
    };

});