Sunday, June 28, 2015

Bootstrap list group example

Posted by at 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script>
        angular.module('app', []);

        angular.module('app').controller("MainController", function () {
            var vm = this;
            vm.title = 'AngularJS List Group Example';
            vm.searchInput = '';
            vm.shows = [
                {
                    title: 'title 1',
                    year: 2001,
                    favorite: true
                },
                {
                    title: 'title 2',
                    year: 2002,
                    favorite: false
                },
                {
                    title: 'title 3',
                    year: 2003,
                    favorite: true
                },
                {
                    title: 'title 4',
                    year: 2014,
                    favorite: true
                },
                {
                    title: 'title 5',
                    year: 2005,
                    favorite: false
                }
            ];
        });
    </script>
</head>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{main.title}}</h1>
        <h3>A list of TV shows</h3>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
        </ul>
        
    </div>
</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)