LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Label List with Input

raw data: {{ vm.labelList }}

repeat items:
label-list:
label-control:
CSS
body {
  padding: 1em;
}

label-list, .label-list, [label-list] {
  display: block;
}

.label-input {
  display: block;
  margin-top: 6px;
  width: 100%;
}

label-item, .label-item, [label-item] {
  margin-bottom: 4px;
  margin-right: 4px;
}
label-item a, .label-item a, [label-item] a {
  color: inherit;
}
JS
console.log('run >>>>>>>>>>>>');
var myapp = angular.module('MyApp',[])
  .controller('MyCtrl',MyCtrl)
  .directive('labelControl',labelControl)
  .directive('labelList',labelList)
  .directive('labelItem',labelItem)
  ;

function MyCtrl () {
  var vm = this;
  vm.labelList = ['alpha','bravo','charlie'];
}
function labelControl($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    template: [
      '
', '{{ item }} ', '
', '
' ].join(''), link: linkFn }; function linkFn(scope, elem, attrs, ngModel) { // console.log('ngModel',angular.copy(ngModel)); $timeout(function () { scope.items = ngModel.$modelValue; scope.newItem = undefined; }, 0); var inp = elem.find('input'); scope.add = add; scope.remove = remove; inp.bind('keypress', function(event) { console.log('input!',event); var keycode = (event.keyCode || event.which); if (parseInt(keycode,10) === 13) scope.$apply(add); }); return; function parse (val) { console.log('parse',val); return val; } function add (item) { // scope.items.push(scope.newItem); scope.items.push(scope.newItem); ngModel.$setViewValue(scope.items); } function remove (item) { scope.items = _.filter(scope.items, function(x) { return x !== item; }); ngModel.$setViewValue(scope.items); } } } function labelList () { return { restrict: 'EA', template: '', scope: { items: "=" } }; } function labelItem () { return { restrict: 'EA', template: '{{ value }} ', scope: { value: '=', update: '&', remove: '&' }, link: linkFn }; function linkFn(scope, elem, attrs) { elem.addClass('label-list-item label label-info'); if (attrs.remove) scope.editable = true; return; } }
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv