angular.js ドットインストール todo をつくろうの書き起こし

2014年10月20日更新 view: 83 view
https://angularjs.org/img/AngularJS-large.png

ドットインストール angular.js todo をつくろうの書き起こし

​勉強ついでに実際書いたコードをメモしておきます。

html

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="/js/angtest.js"></script>


<style>
    .done-true {
        color:gray;
        text-decoration: line-through;
    }
</style>

<body>


<div ng-controller="mainCtrl">

    <p>
        おわった処理 : # {{getDoneCount()}}/ {{tasks.length}}
    </p>

    <button ng-click="deleteDone()">Delete</button>

    <ul>
        <li ng-repeat="v in tasks">
            <label>
                <input type="checkbox" ng-model="v.done">
                <span class="done-{{v.done}}">{{v.body}}</span>
            </label>
            <a href ng-click="tasks.splice($index,1)"> x </a>
        </li>
    </ul>

    <form ng-submit="addNew()">
        <input type="text" ng-model="newTaskBody">
        <input type="submit" value="add">
    </form>

    <pre>
        {{user|json}}
    </pre>

</div>


</body>
</html>

スポンサードリンク

angtest.js (coffeescript)

  @mainCtrl = ($scope) ->
    $scope.tasks = [
      {
        body: "do this 1"
        done: false
      }
      {
        body: "do this 2"
        done: false
      }
      {
        body: "do this 3"
        done: true
      }
      {
        body: "do this 4"
        done: false
      }
    ]

    $scope.addNew = ->
      $scope.tasks.push({
        "body":$scope.newTaskBody
        "done":false
      })
      $scope.newTaskBody = ""

    $scope.getDoneCount = ->
      count = 0
      angular.forEach $scope.tasks, (task) ->
        count += (if task.done then 1 else 0)

    $scope.deleteDone = ->
      old = $scope.tasks
      $scope.tasks = []
      angular.forEach old, (task) ->
        if !task.done
          $scope.tasks.push task

これでとりあえず動く。

スポンサードリンク

関連記事

関連カテゴリ