Skip to content

Instantly share code, notes, and snippets.

@pankajpatel

pankajpatel/ToDoAppHtmlPart.html

Last active November 28, 2017 09:46
Show Gist options
  • Save pankajpatel/89ce20e3b78365aae35b to your computer and use it in GitHub Desktop.
Save pankajpatel/89ce20e3b78365aae35b to your computer and use it in GitHub Desktop.
Download ZIP
ToDo App Whole HTML with AngularJS Binding
Raw
ToDoAppHtmlPart.html
<body ng-app="toDoApp">
<div class="container" ng-controller="ToDoController">
<div class="col-xs-12 col-sm-12 col-md-offset-3 col-md-5 col-lg-offset-3 col-lg-5">
<h2>ToDo App</h2>
<!-- Form Starts Here -->
<div class="form">
<div class="input-group">
<input type="text" class="form-control" ng-model="task">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="addTask()"><span
class="glyphicon glyphicon-plus"></span> Add Task</button>
</span>
</div><!-- /input-group -->
</div>
<hr/>
<!-- Form Ends Here -->
<!-- Task List Starts Here -->
<ul class="list-group" ng-show="tasks.length > 0">
<li class="list-group-item clearfix task" ng-repeat="todo in tasks" ng-class="{disabled: todo.done}">
<p class="lead">{{todo.task}}</p>
<div>
<span class="pull-right">
<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"
ng-click="editTask($index)"></span></button>
<button class="btn btn-primary btn-xs" ng-show="!todo.done"><span class="glyphicon glyphicon-ok"
ng-click="doneTask($index)"></span></button>
<button class="btn btn-primary btn-xs" ng-show="todo.done"><span class="glyphicon glyphicon-repeat"
ng-click="unDoneTask($index)"></span></button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"
ng-click="deleteTask($index)"></span></button>
</span>
</div>
</li>
</ul>
<!-- Task List Ends Here -->
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment