News Feed

<div ng-app="app" ng-controller="NewsCtrl as vm">

​

<div class="container">

  <header id="header" class="row">

    <div class="col-md-12">

      <div class="well text-center">

        <h1>新闻提要</h1>

      </div>

    </div>

  </header>

  <main class="row">

    <!--Repeats over the posts array and then over it's comments-->

    <section class="col-md-6">

      <div class="media" ng-repeat="post in vm.posts">

        <div class="media-left">

          <a href="#">

            <img class="media-object" src="https://placeholdit.imgix.net/~text?w=100&amp;h=100&amp;txtsize=22&amp;txt=%5Bimg%5D" alt="Generic placeholder image">

          </a>

        </div>

        <div class="media-body">

          <!--Keeps a property in the posts to control if the comments are displayed-->

          <h4 class="media-heading">{{post.author}}</h4>

          <p> {{post.text}}</p>

          <p>{{post.date | date:'medium'}}</p>

          <p class="small" ng-click="vm.showComments(post.id)"> {{post.comments.length}} 评论</p>

          <div  ng-show="post.show">

             <form name="formNewComment" novalidate>

               <fieldset class="form-group">

              <textarea type="text" ng-model="vm.comm.comment" placeholder="Comment" required></textarea>

                 </fieldset>

               <fieldset class="form-group">

              <input type="text" ng-model="vm.comm.author" placeholder="Author" required/>

               </fieldset>

               <fieldset class="form-group">

              <button class="btn btn-primary" type="submit" ng-click="vm.newComment(post.id, vm.comm)"

                      ng-disabled="formNewComment.$pristine || formNewComment.$invalid ">

                评论</button>

               </fieldset>

           </form>

          <div class="media" ng-repeat="comment in post.comments">

            <div class="media-left">

              <a href="#">

                <img class="media-object" src="https://placeholdit.imgix.net/~text?w=100&amp;h=100&amp;txtsize=22&amp;txt=%5Bimg%5D" alt="Generic placeholder image">

              </a>

            </div>

            <div class="media-body">

              <h4 class="media-heading">{{comment.author}}</h4>

              <p>{{comment.comment}}</p>

            </div>

          </div>

        </div>

      </div>   

    </section>

    <section class="col-md-6">

    <h4>New Post</h4>

    <form name="formNewPost" novalidate>

      <fieldset class="form-group">

        <label for="description">Description</label>

        <textarea class="form-control" type="text" id="description" 

          placeholder="Enter Post Description" ng-model="vm.input.text" required></textarea>

      </fieldset>

      <fieldset class="form-group">

        <label for="postAuthor">Author</label>

        <input class="form-control" type="text" id="postAuthor" 

          placeholder="Enter Your Name" ng-model="vm.input.author" required/>

      </fieldset>

      <fieldset class="form-group">

            <button class="btn btn-primary" type="submit" ng-click="vm.newPost()"

                    ng-disabled="formNewpost.$pristine || formNewPost.$invalid ">Submit</button>

      </fieldset>

      </form>

     </section>

  </main>

</div>

</div>

​