angular lists

http://angularjs.org/

by abenrob

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">  
    <h3>Click 'x' to delete list, click item to toggle status...</h3>
    <div ng-repeat="list in lists" class="list">
        <div class="listheader">
            <div class="title"><h4>{{list.name}}</h4></div>
            <div class="delete" ng-click="delete($index)">x</div>
        </div>
        <div ng-repeat="item in list.items">
            <div class="item" ng-class="{done: item.gotIt}" ng-click="strike(list.id,$index)">{{item.name}}</div>
        </div>
    </div>
</div>

CSS

h3, h4 {
    margin: 0 5px;
}
.list {
    border: 1px solid black;
    margin: 5px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    min-width: 150px;
}
.listheader {
    border-bottom: 1px solid black;
    display: block;
}
.title {
    display: inline-block;
}
.delete {
    float: right;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
}
.item {
    margin: 0 5px;
}
.done {
    text-decoration: line-through;
    color: red;
}

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.lists = [
    {'id': 1, 'name':'booze','items' : [
        {'name': 'bourbon', 'gotIt':false},
        {'name': 'scotch', 'gotIt':false},
        {'name': 'beer', 'gotIt':true}
    ]},
    {'id': 2, 'name':'food','items' : [
        {'name': 'burritos', 'gotIt':true},
        {'name': 'more burritos', 'gotIt':false},
        {'name': 'even more burritos', 'gotIt':false},
        {'name': 'tortas', 'gotIt':false},
        {'name': 'tacos', 'gotIt':true}
    ]},
        {'id': 3, 'name':'misc','items' : [
        {'name': 'duct tape', 'gotIt':true},
        {'name': 'marbles', 'gotIt':false},
        {'name': 'baling wire', 'gotIt':false},
        {'name': 'transistor radio', 'gotIt':false}
    ]}
]
    $scope.delete = function(idx) {
        $scope.lists.splice( idx, 1 );
    }
    $scope.strike = function(id,idx) {
        angular.forEach($scope.lists, function(list) {
            if (list.id == id) {
                list.items[idx].gotIt = !list.items[idx].gotIt;
            }
        })
    }
}