Angular message Board

Today, using Angularjs to write a message board, simply enjoy the next angular processing data of two-way binding convenience; The comments are all written to the lines.

<! DOCTYPE html>"en"ng-app="text">"UTF-8"> <title>Title</title> <link rel="stylesheet"href="Base.css"> <style>. main{width:600px;            height:250px;            Background: #ccc; Margin:0Auto;        padding:10px;            }. main_title{width:100px;            height:20px; font:20px/20px'Microsoft Ya-Black';            MARGIN:5PX Auto;        Color:aqua;        } input,textarea{background: #fff;            } #sub {width:40px;            height:20px;            Background:skyblue;        Cursor:pointer;            }. none_mes{width:620px;            height:40px; Background:rgba (146,234, -,0.8); Text-Align:center; font:20px/40px'Microsoft Ya-Black'; Margin:0Auto;            }. message{width:600px;            height:100px; Background:rgba (146,234, -,0.8); Margin:0Auto;        padding:10px;            }. Message. name,.message. job,.message. mes{height:20px;        width:620px;            }. Message. del{width:40px;            height:20px;            background:orangered; Text-Align:center; Line-height:20px;        Cursor:pointer; }    </style> <script src="Angular.js"></script> <script>varApp=angular.module ('text',[]); App.controller ('add_msg', Function ($scope) {//first clear the message fill in the information$scope. data=[]; $scope. Username="'; $scope. Job="'; $scope. Mes="'; //Click OK to add content here just adds an Add method, and when you click on the OK button, add the call event Ng-click model$scope. add=function () {//to judge, when the content of the message is allowed to add, not all the time to prompt the user                    if($scope. Username && $scope. Job &&$scope. Mes)                            {$scope. Data.push ({username: $scope. Username,                        Job: $scope. Job, mes: $scope. mes}); //depositing information into LocalstorageLocalstorage.username=$scope. Username; Localstorage.job=$scope. Job; Localstorage.mes=$scope. Mes; //get to the content once again empty the message fill in the information$scope. username="'; $scope. Job="'; $scope. Mes="'; }Else{alert ('please fill in the full content');                }                }; //When you click Delete, because data is an array, you can delete the current one, $index as an index,$scope. delete=function (index) {$scope. Data.splice (Index,1);                Localstorage.clear ();                }; //Add Keyboard Enter submit function, when all the input can be in the last input position to press enter to submit$scope. keyup=function () {if(ev.keycode== -){                        //when you enter the bar with the Add function                         This. Add ();            }                };    }); </script>"Color: #000"Ng-controller="add_msg"> <divclass="Main"> <divclass="Main_title"> Message board </div> <div> <spanclass="name"> Name </span><input type="text"Name=""Ng-model="username"> <spanclass="name"> Company </span><input type="text"Name=""Ng-model="Job"> <divclass="name"> Message content </div> <textarea name=""cols=" -"Rows="Ten"Ng-model="mes"ng.keyup="KeyUp ($event)"></textarea><br/> <input type="Button"Value="Determine"Id="Sub"ng-click="Add ()"> </div> </div> <divclass="None_mes"ng-show="data.length==0"> No messages </div> <!--iteminchThe loop style in data angular adds the corresponding value where the content is needed. -<divclass="message"ng-repeat="Item in Data"> <ul> <liclass="name"> Name:{{item.username}}</li> <liclass="Job"> Company:{{item.job}}</li> <liclass="mes"> Message Content:{{item.mes}}</li> <liclass="del"ng-click="Delete ($index)"> Delete </li> </ul> </div></body>
Angular message Board