AngularJS1.5に再挑戦 その12 Forms and ngSubmit

概要

AngularJS1.5に再挑戦 その12 Forms and ngSubmit

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Forms and ngSubmit

• json/posts.jsonにコメント項目を追記する。

[
  {"title": "Ne Title", "id":1, "description": "This is a book", "publishDate": "2017-01-08",
              "comments":[
                {"id":1, "text": "Nice book"},
                {"id":2, "text":"Another comment"}
              ]},
  {"title": "Title2", "id":2, "description": "This is a book"},
  {"title": "Some Title3", "id":3, "description": "This is a book"},
  {"title": "Some Title4", "id":4, "description": "This is a book"}
]

• blog-detai.htmlにコメント表示のviewを追記する。これは、jsonからcommentsの部分を取り出して、表示しているだけ。

<h1>{{ post.title }}</h1>

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

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

<h3>Comments</h3>
<ul>
    <li ng-repeat='comment in post.comments'>
        {{ comment.text }}
</ul>
<form>
<input type='hidden' ng-model='comment.id' value='5'>
<textarea ng-model='comment.text'></textarea>

</form>

• ng-submitを使ってフォームを作成してみる。

<h1>{{ post.title }}</h1>

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

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

<h3>Comments</h3>
<ul>
    <li ng-repeat='reply in post.comments'>
        {{ reply.text }}
</ul>

<p style='color:red;' ng-if='reply'>Preview: {{ reply.text }}</p>
<form ng-submit=''>
    <input type='hidden' ng-model='reply.id' value='5'>
    <textarea ng-model='reply.text'></textarea>
    <input type='submit'/>
</form>

• blog-detail.component.jsに追記する。

...
            $scope.addReply = function(){
                console.log($scope.reply) //この時点では、scope.replyをどこにもセットしていない。
            }
...

• さらに、blog-detail.htmlにaddReply functionを挿入する。

<form ng-submit='addReply()'> # このaddReply()のカッコまでちゃんと入れる
    <input type='hidden' ng-model='reply.id' value='5'>
    <textarea ng-model='reply.text'></textarea>
    <input type='submit'/>
</form>

• この状態で何かしら送信すると以下のように表示される。$scope.replyの箇所には、自動でsubmitされたtextが表示される。

Object { text: "dddd" }

• ここにさらにidを加えたいので、blog-detail.component.jsに以下のように追記する。これでidも表示されるようになる。

                angular.forEach(data, function(post){
                    if (post.id == $routeParams.id){
                        $scope.notFound = false
                        $scope.post = post
                        $scope.reply = {
                            "id": post.comments.length + 1,
                            "text": "",
                        }

• この機能を分離させて、関数にする。resetReply()というfunctionを作成する。

angular.module('blogDetail').
    component('blogDetail', {
        templateUrl: '/templates/blog-detail.html',
        controller: function(Post, $http, $location, $routeParams, $scope){//Postモジュールを追加する。
            Post.query(function(data){
                //ここで定義しておかないと、forループに入らなかった時に、notFoundが定義されていないことになるため。
                $scope.notFound = true
                angular.forEach(data, function(post){
                    if (post.id == $routeParams.id){
                        $scope.notFound = false
                        $scope.post = post
                        resetReply()
                    }
                })
            })
            $scope.addReply = function(){
                console.log($scope.reply)
                resetReply()
            }

            function resetReply(){
                $scope.reply = {
                    "id": $scope.post.comments.length + 1,
                    "text": "",
                }
            }

• さらに、これをpushして表示させる。この時点では、jsonデータに追加はされていない。

$scope.addReply = function(){
                console.log($scope.reply) //$scope.replyをpushでその配列に追加している。
                $scope.post.comments.push($scope.reply)
                resetReply()
            }

• さらにfilter機能も簡単につけられる。

<h3>Comments</h3>
<ul>
    <li>
        <input type='text' ng-model='query' placeholder='filter comments' />
    </li>
    <li ng-repeat='comment in post.comments | filter: query'>
        {{ comment.text }}
</ul>

• これはすごい！