Advertisement
fabiobiondi

fewfew

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