AngularJS demo-1

two way binding

by wales

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="myModule" class='container'>
    <div class='col-xs-4' ng-controller='HelloController'>
        <form role='form'>
            <div class="form-group">
                <label>Your name please</label>
                <input type="text" ng-model='greeting.text' class="form-control" />
                <p>Hi , {{greeting.text}}</p>
            </div>
        </form>
        <div ng-controller="AlertDemoCtrl">
            <div ng-repeat="alert in alerts" class="alert alert-{{alert.type}}">{{alert.msg}}</div>
            <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
        </div>
    </div>
</body>

CSS

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

JavaScript

angular.module('myModule', ['ui.bootstrap']);

function HelloController($scope) {
    $scope.greeting = {
        text: 'anonymous'
    };
}

function AlertDemoCtrl($scope) {
    $scope.alerts = [{
        type: 'danger',
        msg: 'danger message'
    }, {
        type: 'success',
        msg: 'success message.'
    }];

    $scope.addAlert = function () {
        $scope.alerts.push({
            type: 'info',
            msg: "Another alert!"
        });
    };
}