var demoApp = angular.module('demoApp', []);

demoApp.controller("scopeCtrl", function($scope) {
  $scope.products = [
    {product_name: "デジタルカメラA",price: 8500},
    {product_name: "ノートパソコンA",price: 39000},
    {product_name: "テレビA",price: 15900},
    {product_name: "デジタルカメラB",price: 9800},
    {product_name: "テレビB",price: 25900}
  ];
  $scope.name = "カメラ";
  $scope.parebind = "親スコープで設定した初期値";
  $scope.group = "member";
  $scope.getFee = function (grp) {
    return grp == "member" ? "送料は無料です。" : "送料は１商品1,000円です。";
  }
});

demoApp.directive("orderedList0", function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs["orderedList1"]];
    },
    scope: false,
    template: "<p>フィルター（変数name）: <input ng-model=name /></p><ol><li ng-repeat='item in data | filter: name'>{{item.product_name}}　：　{{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList1", function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs["orderedList1"]];
    },
    scope: true,
    template: "<p>フィルター（変数name）: <input ng-model=name /></p><ol><li ng-repeat='item in data | filter: name'>{{item.product_name}}　：　{{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList2", function () {
  return {
    scope: {
      localname: "=namescope",
      localbind: "=bindscope"
    },
    template: "<p>2Way（変数localbind）: <input ng-model=localbind /><br />フィルター（変数key）: <input ng-model=key /><ol><li ng-repeat='item in localname | filter: key'>{{item.product_name}}　：　{{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList3", function () {
  return {
    scope: {
      localname: "@namescope",
      localbind: "@bindscope"
    },
    template: "<p>1Way（変数localbind）: <input ng-model=localbind /><br />データ（変数localname）: {{localname}}</p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList4", function () {
  return {
    scope: {
      localname: "=namescope",
      localbind: "=bindscope",
      localfee: "&feescope"
    },
    template: "<p><ol>  <li ng-repeat='item in localname | filter: key'>{{item.product_name}}　：　{{item.price | number:0}}円</li></ol><span>※{{localfee()}}<span></p>",
    restrict: "A"
  }
});

var demoApp = angular.module('demoApp', []);

demoApp.controller("transCtrl", function($scope) {
  $scope.title = 'パネルのタイトル';
  $scope.text = 'パネルの本文';
});

demoApp.directive("panel", function () {
  return {
    restrict: "E",
    scope: { title:'@' },
    template: '<div class="panel panel-default"><div class="panel-heading"><h4>{{title}}</h4></div><div class="panel-body"><p ng-transclude></p></div></div>',
    transclude: true,
  }
});

var demoApp = angular.module('demoApp', []);

demoApp.controller("ctlCtrl", function($scope) {
  $scope.products = [
    { name: "商品A", price: 100, quantity: 2 },
    { name: "商品B", price: 150, quantity: 3 },
    { name: "商品C", price: 200, quantity: 1 }
  ];
});

demoApp.directive("productItem", function () {
  return {
    template: "<td>{{item.name}}</td><td>{{item.price}}</td><td><input ng-model='item.quantity' /></td>",
    require: "^productTotal",
    link: function (scope, element, attrs, ctrl) {
      scope.$watch("item.quantity", function () {
        ctrl.updateTotal();
      });
    }
  }
});

demoApp.directive("productTotal", function () {
  return {
    scope: { total: "=productTotal", data: "=productData" },
    controller: function ($scope, $element, $attrs) {
      this.updateTotal = function() {
        var calc = 0;
        for (var i = 0; i < $scope.data.length; i++) {
          calc += $scope.data[i].quantity * $scope.data[i].price * 1.08;
        }
        $scope.total = calc;
      }
    }
  }
});