List Add & Del

リストに追加とリストからの削除です。

Maeda          (20          )Add
□Tanaka(16)
□Yamada(26)
□Suzuki(36)
Del

次のリンクをクリックすると "ngp_add_del.html" が呼び出されます。
List Add & Del

プログラムの説明

AngularJS サンプルプログラム "ngp_add_del.html" です。

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function() {
  this.members = [
    { name:"Tanaka", age:16 },
    { name:"Yamada", age:26 },
    { name:"Suzuki", age:36 },
  ];
  this.onAdd = function() {
    this.members.push({ name:this.name, age:this.age });
    this.name = this.age = "";
  };
  this.onDel = function() {
    for (var i = 0; i < this.members.length; i++) {
      if (this.members[i].checked) {
        this.members.splice(i--, 1);
      }
    }
  };
});
</script>
</head>

<body ng-controller="myController as myCtrl">
 <div>
  <input type="text" ng-model="myCtrl.name">(<input type="text" ng-model="myCtrl.age">)
  <button ng-click="myCtrl.onAdd()">Add</button>
 </div>
 <div ng-repeat="member in myCtrl.members">
  <input type="checkbox" ng-model="member.checked">{{member.name}}({{member.age}})
 </div>
 <div><button ng-click="myCtrl.onDel()">Del</button></div>
 <hr><pre>{{myCtrl|json}}</pre><hr>

</body>
</html>

myApp モジュールを作成して myController コントローラーを登録します。
members で登録するデータ(文字列)を配列として定義します。

var app = angular.module("myApp", []);
app.controller("myController", function() {
  this.members = [
    { name:"Tanaka", age:16 },
    { name:"Yamada", age:26 },
    { name:"Suzuki", age:36 },
  ];

members.push でデータをリストに追加する onAdd 関数です。

  this.onAdd = function() {
    this.members.push({ name:this.name, age:this.age });
    this.name = this.age = "";
  };

members.splice でチェックされたデータをリストから削除する onDel 関数です。

  this.onDel = function() {
    for (var i = 0; i < this.members.length; i++) {
      if (this.members[i].checked) {
        this.members.splice(i--, 1);
      }
    }
  };

div で myController を定義します。
input で name と age をタイプ入力する text box を設定します。
登録されたデータ(members)を ng-repeat で繰り返しながら、チェックボックスを付けて表示します。
Add ボタンのクリックで、name と age にタイプされたデータを myCtrl.onAdd() 関数で追加します。
Del ボタンのクリックで、チェックされているデータを myCtrl.onDel() 関数で削除します。

<body ng-controller="myController as myCtrl">
 <div>
  <input type="text" ng-model="myCtrl.name">(<input type="text" ng-model="myCtrl.age">)
  <button ng-click="myCtrl.onAdd()">Add</button>
 </div>
 <div ng-repeat="member in myCtrl.members">
  <input type="checkbox" ng-model="member.checked">{{member.name}}({{member.age}})
 </div>
 <div><button ng-click="myCtrl.onDel()">Del</button></div>

デバッグ用に {{myCtrl|json}} で myCtrl に登録されている一覧を json 形式で印字しています。
<hr><pre>{{myCtrl|json}}</pre><hr>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)