モデルとコントローラー

基本的なフレームワークに基づき、モデルを追加できます。モデルとは、データをフィールド名に割り当てるためのクラスを作成する関数です。モデルを追加すると、コントローラーでこのクラスのインスタンスを作成して、データ値を各フィールドに割り当てることができます。

より基本的な用法では、モデルを省略し、コントローラー内で個々のフィールドに 1 つずつ値を割り当てることもできます。コントローラーの $scope パラメータは、モデルのデータコンテキストを制御します。オプションで $locale パラメータを追加することもできます。

次に、4 つのデータフィールドから成る基本的な Person モデル、および 4 行のデータを保持するコントローラーの例を示します。

基本的なモデルおよびコントローラー	コードのコピー
<script type="text/javascript"> //Person class function Person(data) { this.ID = data.ID; this.Company = data.Company; this.Name = data.Name; this.Sales = data.Sales; }; function MyController($scope, $locale) { $scope.list = [ new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo", Sales: 8900 }), new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno", Sales: 4500 }), new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy", Sales: 7600 }), new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund", Sales: 3200 }) ]; } </script>

基本的なモデルおよびコントローラー

コードのコピー

<script type="text/javascript">
    //Person class
    function Person(data) {
        this.ID = data.ID;
        this.Company = data.Company;
        this.Name = data.Name;
        this.Sales = data.Sales;
    };

    function MyController($scope, $locale) {
        $scope.list = [
              new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo", Sales: 8900 }),
              new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno", Sales: 4500 }),
              new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy", Sales: 7600 }),
              new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund", Sales: 3200 })
        ];
    }
</script>

次に、モデルを使用しない、ごく単純なコントローラーの例を示します。

基本的なコントローラー	コードのコピー
<script type="text/javascript"> // AngularJS controller used for this sample function MyController($scope) { $scope.val = 50; $scope.min = 0; $scope.max = 100; } </script>

関連トピック