A Pen by CarterTsai.

index.html

<div ng-app="MyApp" ng-controller="Ctrl">
資料由文章產生器所產生，所以沒有什麼意義 > <
  <div class="pure-g-r MsgBox" ng-repeat="d in msg| from: 0 | limitTo: 5 track by d.id">  
    <div class="lef pure-u-1-5"></div>  
   
    <div class="right pure-u-4-5">
      <div class="pure-u-1-9 personal">
        <div class="picture "><i class="fa fa-html5 fa-4x"></i></div>
        <div class="name "> {{d.name}} </div>
      </div>
      <div class="pure-u-1-9 msg" ng-bind-html="d.msg">  </div>
      <span>Reply Content</span>
      <div class="pure-u-1-9 reply"> 
        <div class="sub_reply " ng-repeat="r in d.reply track by $id(r)" >
          <label> {{r.name}} say: </label>
          <div ng-bind-html="r.comment"></div>
        </div>      
      </div>
    </div>
  </div>
</div>

My-Msg-View.markdown

My Msg View

• JavaScript

  1. AngularJS 1.2.0
  2. Angular-Sanitize 1.2.0

• Style:

  1. Pure-0.3.0
  2. Font-awesome-4.0.2 A Pen by CarterTsai on CodePen.

License.

script.js

var app = angular.module('MyApp', ['ngSanitize']);

function Ctrl($scope, $sce) {
  
  $scope.msg = [
      {id:"1" ,name:'K. Love'  ,msg:"—在台灣人連教育是什麼都不知的年代，江田島平八就投入這個行業。三年來，他不斷革自己的命，不斷重新定義教育的觀念，將男塾推上世界最大的教育企業之一。", reply : [
      {id: '1', name: 'L. Bird', comment: 'Wowwwwwwww'},
      {id: '2', name: 'L. Bird', comment: 'amazing'},
      {id: '3', name: 'L. Bird', comment: 'Cool'},
      {id: '4', name: 'L. Bird', comment: 'Very good Message'},
  ]},
      {id:"2" ,name:'C. John'  ,msg:'男塾集團擁有五十六家子公司。男塾，一般人很陌生，但它不但擁有全球最大專業學生代工廠、也是最大的數位化學生供應廠，集團總營業額超過九兆一千三百七十億元。總言之，它是全球最大學生垂直整合王國。'},
      {id:"3" ,name:'Z. SHE'   ,msg:"江田島平八出身於一個出類拔萃超群絕倫的家庭，父親是山本五十六，母親則是川島芳子，從小灌輸江田島平八傳統出類拔萃超群絕倫的教育，在大學時主修大艦巨砲主義與拳法家的事務要由拳法家自己解決，同時也修習了俄、德、法、義、美、日、英、澳八國語文，在這樣一段平淡的日子中，江田島平八卻深深體會到了僵化教育體制下的不足。「這樣的日子，不是我要的！」在大學的第三年，江田島平八便著手創辦男塾。" },
      {id:"4" ,name:'G. XYZ'   ,msg:"即使創業時成績耀眼，第一年男塾還是虧損了九千三百六十二億四千五百八十萬元，除了必須要靠現金卡度日，甚至還必須向地下錢莊貸款，到後來仇家甚至花錢買兇，黑道組頭也揚言要殺他全家，殺人手法包括縱火、下毒、假車禍、開瓦斯氣爆、還有一桶汽油外加一跟番仔火…儘管如此，這都不能夠動搖江田島平八堅持發展教育產業的決心。"  },
      {id:"5" ,name:'S. Share' ,msg:"「教育這一行實在是一門深奧的學問。」痛定思痛之後，江田島平八也對教育從此有了更多的體悟。「果然，公司要獲利，除了自身的努力、創意的能量、以及正確的經營策略之外，最重要的還是—內線交易。」江田島平八肯定的表示。"  }
  ];
}

app.filter('from', function() {
    return function(data, from) {
        return data.slice(parseInt(from));
    }
});

style.scss

@import "compass";
$h : 315px;
$borderStyle: 0px solid #ccc;

body {
  margin-top:0px;
  margin-bottom:0px;
  margin-left: 0px;
  margin-right: 0px;
}

.MsgBox {
   margin: 30px 30px 30px 30px;
   height: auto;
   display: block;
   clear:both;
	 padding: 0;
}

.MsgBox > .right {
   position:relative;
   margin-right:auto;
   margin-lef:auto;
}

.MsgBox > .right > .personal {
  padding-top: 10px;
  clear:both;
}


.MsgBox > .right > .personal > .picture {
    width:  50px;
    height: 50px;
    float: left;
}

.MsgBox > .right > .personal > .picture > i {
   color: rgb(255, 190, 129);;
}


.MsgBox > .right > .personal > .name {
    font-size: 25px;
    color: #3b5998;
    height: 60px;
    margin-left: 70px;
    padding-top: 10px;
}


.MsgBox > .right > .msg {
    min-height: 100px;
    border: $borderStyle;
    padding-right: 90px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
    background: #1f8dd6;
    color: #fff;
}
.MsgBox > .right > .reply {
    clear:both;
    height: auto;
    display: block;
    padding-left: 0.5em;
    text-decoration: none;
}

.MsgBox > .right > .reply > div > label {
  font-size: 15px; 
   color: blue;
}

.MsgBox > .right > .reply > .sub_reply {
  margin-top: 10px;
}