Your First AngularJS App

Same Backbone application from http://tutorialzine.com/2013/04/services-chooser-backbone-js/ but in AngularJS

HTML

<script src="http://fonts.googleapis.com/css?family=PT+Sans:400,700"></script>
<form id="main" ng-app ng-controller="myservices">
<h1>My Services</h1>

<ul id="services">
	<!-- The services will be inserted here -->
    <li ng-repeat="service in services">
        <input type="checkbox" ng-model="service.selected" value="1" name="{{service.title}}">
            {{service.title}}<span>${{service.price}}</span>
        </input>
    </li>
</ul>

<p id="total">total: <span>${{total()}}</span></p>

    <input type="submit" id="order" value="Order"/>
</form>

CSS

*{
    margin:0;
    padding:0;
}
 
 
/*-------------------------
    General Styles
--------------------------*/
 
 
html{
    background-color:#edf0f4;
}
 
body{
    font:15px/1.3 Arial, sans-serif;
    color: #4f4f4f;
}
 
a, a:visited {
    outline:none;
    color:#389dc1;
}
 
a:hover{
    text-decoration:none;
}
 
section, footer, header, aside{
    display: block;
}
 
 
/*----------------------------
    The main content element
-----------------------------*/
 
 
#main{
    padding:100px;
    background-color:#fff;
    box-shadow:0 0 1px #ccc;
    width:700px;
    margin:100px auto;
    border-radius:6px;
    font:bold 24px/1 'PT Sans', sans-serif;
    color:#6b6b6b;
}
 
 
#main h1{
    font-size:36px;
    text-align: center;
    text-transform: uppercase;
    padding: 0 0 80px;
 
}
 
#services{
    list-style:none;
    margin:0 auto;
    width:600px;
}
 
#services li{
    background-color: #fbfbfc;
    box-shadow:0 1px 1px #eee;
    font-size:22px;
    color: #85898b;
    padding:22px 30px;
    margin-bottom:15px;
    border-radius:4px;
    cursor:pointer;
}
 
#services li span{
    float:right;
    opacity:0.6;
}
 
#services li input[type=checkbox]{
    border:1px solid #ccc;
    box-shadow:1px 1px 1px #ccc;
    margin-right:10px;
    width:16px;
    height:16px;
    display:inline-block;
    vertical-align: middle;
}
 
#total{
    font-size:24px;
    text-align:right;
    width:570px;
    margin:30px auto 0;
    padding-right:30px;
}
 
#total span{
    display:inline-block;
    min-width:70px;
}
 
 
#order{
    font:inherit;
    font-size:24px;
    cursor:pointer;
    border:none;
    display:block;
    background-color:#89bde5;
    color:#fff;
    text-transform:uppercase;
    width:200px;
    margin:80px auto 0;
    text-align:center;
    padding:22px 0;
    border-radius: 3px;
    box-shadow:0 1px 1px #ddd, 0 0 20px #84b8e0 inset;
}
 
#order:hover{
    opacity: 0.9;
}

JavaScript

function myservices($scope){
    $scope.services=[
        { title: 'web development', price: 200},
        { title: 'web design', price: 250},
        { title: 'photography', price: 100},
        { title: 'coffee drinking', price: 10}];
    $scope.total=function(){
        var t = 0;
        angular.forEach($scope.services, function(s){
            if(s.selected)
                t+=s.price;
        });
        return t;
    };
}