Заметки на AngularJS

Разработка Заметки на AngularJS

Нет прав для скачивания
Заметки на AngularJS.
Создаем разметку HTML:
HTML:
<h1 class="header">AngularJS Markdown Notes</h1>
<div ng-app="notesApp" class="app">
  <div ng-controller="notesController">
 
    <span class="icons">
    <i class="fa fa-plus-circle fa-2x" ng-click="addNote()"></i>
      </span>
    <div class="note" ng-repeat="note in notes | orderBy:'createdOn':true track by $index">
      <span class="date">{{note.createdOn | date:"EEEE dd MMMM, yyyy 'at' h:mma"}}</span>
      <span class="icons">
      <i class="fa fa-check fa-lg" ng-if="note.edit == false"></i>
      <i class="fa fa-pencil fa-lg" ng-if="note.edit == true"></i>
      <i class="fa fa-trash-o fa-lg" ng-click="delete(notes.length - $index - 1)"></i></span>
      
      <div class="markdown-body" ng-model="note.text" ng-change="update(notes.length - $index - 1,note.text)" ng-focus="note.edit = true" ng-blur="note.edit = false" markdown-editable contenteditable="true">{{ note.text }}</div>
    </div>
  </div>
</div>
Пишем стиль:
Less:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);

* {
  box-sizing:border-box;
}

body {
  max-width:580px;
  margin:auto;
  padding:10px;
  position:relative;
  background: #fdfdfd;
}

img {
  max-width:100%;
  height:auto;
}

div[contenteditable] {
  font-size:1.2em;
  font-family: 'Source Sans Pro', sans-serif;
  border:none;
  box-shadow:none;
  margin:0;
  width:100%;
  padding:10px 20px 10px;
  min-height:300px;
  background:#f9f9f9;
 
  pre, code {
    background:#ededed;
  }
}

div[contenteditable]:focus{
 font-family: 'Source Code Pro', courier, monospace;
  font-size:1em;
}

.header {
  margin:5px 10px 0;
  color:#d46e58;
  display:inline-block;
}

.note {
  background: #eee;
  box-shadow:#999 1px 1px 3px;
  margin:30px 0;
  padding-top:40px;
  min-height:200px;
  width:100%;
  display:block;
  position:relative;
  overflow:hidden;
}

.date {
  position:absolute;
  top:0;
  left:0;
  padding:15px;
  font-size:0.7em;
  font-style: italic;
  color:#71CBD0;
}

.icons {
  position:absolute;
  right:0;
  top:0;
  padding:10px;
}

.fa-trash-o, .fa-plus-circle {
  cursor:pointer;
}

.fa-check {
  color:#92D788;
}

.fa-trash-o {
  color:#C2474B;
 
  &:hover {
    color:darken(#C2474B,20);
  }
}

.fa-pencil {
  color:#DBC394;
}

.fa-plus-circle {
  color:#71CBD0;
 
  &:hover {
    color:darken(#71CBD0,20);
  }
}
Пишем AngularJS:
JavaScript:
(function(){

  var app = angular.module('notesApp',['angular-markdown-editable']);
 
  app.controller('notesController', function($scope){
    
    // Initial Data
      $scope.notes = [{
      createdOn:1428237500771,
      edit:false,
      text:"#Hello, World!\n\nThis is your first Angular Markdown note. You can:\n\n* Click/Focus to edit\n\n* Click off/Blur to save\n\n* Add a new note  by clicking the plus sign above.\n\n* Delete this note\n\nMarkdown compiled using the fantastic [angular-markdown-editable](http://projects.quiver.is/angular-markdown-editable/) directive."
    }];
    
    // Add New Note
    $scope.addNote = function(){
      $scope.newNote = {};
      $scope.newNote.createdOn = Date.now();
      $scope.newNote.text = ' ';
      $scope.newNote.edit = true;
      $scope.notes.push($scope.newNote);
      $scope.newNote = {};
    };
    
    // Delete Note
    $scope.delete = function (i) {
      var r = confirm("Are you sure you want to delete this note?");
      if (r == true)
        $scope.notes.splice(i, 1);
        };
    
    // Update Note
    $scope.update = function(i, note) {
      $scope.notes[i].text = note;
      $scope.notes[i].edit = false;
    };
 
  // End Controller
  });
 
// End Function 
})();
Смотрим результат:
45w16.gif
Автор
baltun
Скачиваний
0
Просмотры
750
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Назад
Верх Низ