AngularJSのサンプルを弄ってみた

デモ

ng-modelを利用して入力値を指定の場所に反映させるサンプル

入力した値は {{inputvalue}} です

ng-controllerを利用してTODO機能を実装したサンプル

{{todo.text}}

{{todos.length}}件中{{remaining()}}件未対応

ソース

javascript

function TodoCtrl($scope) {
  $scope.initTodos = [
    {text:'課題１', done:false},
    {text:'課題２', done:false}];
  $scope.todos = $scope.initTodos;

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };

  $scope.undo = function() {
    var initTodos = $scope.initTodos;
    $scope.todos = [];
    angular.forEach(initTodos, function(todo) {
      $scope.todos.push(todo);
    });
  };
}

HTML


<h4 class="index">ng-modelを利用して入力値を指定の場所に反映させるサンプル</h4>
<div ng-init="inputvalue='hogehoge';">
<ul class="inline unstyled">
<li><input type="text" ng-model="inputvalue" placeholder="Enter a name here"></li>
<li>入力した値は <span class="label label-success">{{inputvalue}}</span> です</li>
</ul>
</div>

<hr  />

<h4 class="index">ng-controllerを利用してTODO機能を実装したサンプル</h4>
<div ng-controller="TodoCtrl">
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30" placeholder="TODOの追加">
<input class="btn-primary" type="submit" value="追加">
</form>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<span>{{todos.length}}件中{{remaining()}}件未対応</span>
<ul class="inline unstyled">
<li><a href="" ng-click="archive()" class="btn btn-mini">対応済みのものを
削除する</a></li>
<li><a href="" ng-click="undo()" class="btn btn-mini">終了したTODOを戻す</a></li>
</ul>
</div>