Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script><html>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
​
<body class="container" ng-app="myApp" ng-controller="todoCtrl">
        <div id="app" class="todo-container">
            <div class="todo-input-container">
                <div class="header"><h2><i class="fa fa-bars bars-tab"></i>{{message}}</h2></div>
                <div class="todo-input">
                    <input ng-model="todoInput" type="text" vale="" placeholder="add todo text" v-model="newTodoText"/>
                    <input type="button" value="Add" ng-click="todoAdd()"/>
                </div>
            </div>
            <div class="todo-list-container">
                <ul>
                    <li ng-repeat="todo in todos">
                        <div ><i class="fa fa-shield fa-2x fa-rotate-90"></i>
                        <h2 class="inline">
                          <span>{{ todo.text}} </span>
                        </h2>
                          <i ng-click="remove(todo)" class="fa fa-trash-o fa-2x"></i>
                          </div>
                    </li>
                </ul>
                <div class="todo-length">Total Todos: {{ todos.length}}</div>
            </div>
​
        </div>
    </body>
</html>
​
 
​
.todo-container{
                position: relative;
                width: 500px;
                margin: 0px auto;
                background-color: aliceblue;
        }
​
        .header{
            text-align: center;
        }
​
        .todo-input{
            position: relative;
             margin: 0px auto;
             width : 50%;          
        }
        .todo-input input{
            font-size: 16px;
            line-height: 2em;
        }
​
        .todo-list-container{
            margin-top: 50px;
        }
​
        .todo-length{
            float : right;
        }
​
        .inline{
          display:inline;
        }
   
        li {
          list-style-type: none
        }
​
        .fa-trash-o:hover{
          cursor:pointer;
          color: red;
        }
​
        .bars-tab{
          padding-right: 30px;
        }
 
let todoData = [
        {
            text: 'Hello World',
            done: false
        },
        {
            text: 'Hello Sunday',
            id: false
        },
        {
            text: 'Hello Angular',
            id: false
        }
    ];
​
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
  $scope.message = "Angular Todos!!";
    $scope.todos = todoData;
​
    $scope.todoAdd = function() {
        $scope.todos.push({text:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };
​
    $scope.remove = function(todo) {
        todo.done = true;
        $scope.todos = $scope.todos.filter(todo=> !todo.done);
    };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
prabodhmeshrampro
0viewers