Advertisement
fabiobiondi

Untitled

Oct 15th, 2016
470
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div ng-app="MyApp"
  2.      ng-controller="MyCtrl as ctrl">  
  3.      
  4.   <list
  5.     data="ctrl.dataModel.list"
  6.     on-delete="ctrl.delete($item)"
  7.     on-add="ctrl.add($label)"
  8.     ></list>
  9.  
  10. </div>
  11.  
  12.  
  13. ------
  14. angular.module('MyApp')
  15.  
  16. .value('DataModel', {
  17.   list: [
  18.     { label: 'one'},
  19.     { label: 'two'},
  20.   ]
  21. })
  22.  
  23. .controller('MyCtrl', function(DataModel) {
  24.   this.dataModel = DataModel;
  25.  
  26.  
  27.  
  28.   this.add = function(name) {
  29.     this.dataModel.list.push({
  30.       label: name
  31.     });
  32.   };
  33.  
  34.   this.delete = function(item) {
  35.   console.log ('..>', item)
  36.     var i = this.dataModel.list.indexOf(item);
  37.     this.dataModel.list.splice(i, 1);
  38.   };
  39.  
  40. })
  41.  
  42.  
  43.  
  44.  
  45. ------
  46.  
  47.  
  48. angular.module('MyApp', [])
  49.  
  50. .component('list', {
  51.     bindings: {
  52.       data: '=',
  53.       onDelete: '&',
  54.       onAdd: '&',
  55.     },
  56.     restrict: 'E',
  57.     template: `
  58.       <div>
  59.         <!-- Add Form -->
  60.         <form-add on-add="$ctrl.add($label)"/></form-add>
  61.        
  62.         <!-- item list -->
  63.         <ul class="list-group">
  64.           <list-item on-delete="$ctrl.remove($item)"
  65.             ng-repeat="item in $ctrl.data"
  66.             item="item"/>
  67.         </ul>
  68.       </div>`,
  69.     controller: function() {
  70.    
  71.       this.add = function(name) {
  72.       console.log('add')
  73.         this.onAdd({$label: name});
  74.       };
  75.  
  76.       this.remove = function(item) {
  77.         this.onDelete({$item: item});
  78.       };
  79.     }
  80. })
  81.  
  82.  
  83.  
  84. ------
  85.  
  86. .component('formAdd', {
  87.     restrict: 'E',
  88.     bindings: {
  89.       onAdd: '&'
  90.     },
  91.     template: `
  92.       <input type="text"
  93.         ng-model="$ctrl.name"
  94.         class="form-control" />
  95.       <button ng-disabled="!$ctrl.name.length"
  96.         ng-click="$ctrl.add()"
  97.         class="btn btn-xs">
  98.         Add Item
  99.       </button> <hr />
  100.    `,
  101.     controller: function() {
  102.       this.add = function() {
  103.         this.onAdd({ $label: this.name})
  104.         //this.list.add(this.name);
  105.         this.name = null;
  106.       };
  107.     }
  108. })
  109.  
  110.  
  111.  
  112. .component('listItem', {
  113.     bindings: {
  114.       item: '=',
  115.       onDelete: '&'
  116.     },
  117.     restrict: 'E',
  118.     template: `
  119.     <li class="list-group-item">
  120.       {{$ctrl.item.label}}
  121.       <button ng-click="$ctrl.remove()"
  122.          class="btn btn-xs pull-right">
  123.       Remove</button>
  124.     </li>
  125.     `,
  126.     controller: function() {
  127.       this.remove = function() {
  128.        // this.list.remove(this.item);
  129.        this.onDelete({ $item: this.item });
  130.       };
  131.     }
  132. });
  133.  
  134. ------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement