Skip to content

Instantly share code, notes, and snippets.

@LuizPanariello
Created June 8, 2015 16:57
Show Gist options
  • Save LuizPanariello/b5f2191a2f9b2022d4c8 to your computer and use it in GitHub Desktop.
Save LuizPanariello/b5f2191a2f9b2022d4c8 to your computer and use it in GitHub Desktop.
JS Bin// source http://jsbin.com/federakapu
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="List">
<div dt-editable-list="list"></div>
</div>
<script id="jsbin-javascript">
var app = angular.module('app', []);
app.directive('dtEditableList', ['$timeout',
function($timeout) {
return {
scope:{
dtEditableList: '=',
},
restrict: 'EA',
replace: true,
template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
controller: ['$scope', function($scope) {
$scope.inputList = $scope.dtEditableList;
$scope.remove = function(index){
$scope.inputList.splice(index, 1);
};
$scope.toggleEdit = function(input){
input.editMode = !input.editMode;
};
$scope.add = function(inputName){
if(inputName === "" || typeof inputName === 'undefined' ) return;
var add = {Name: inputName};
$scope.inputList.push(add);
$scope.newInput = "";
};
}]
};
}
]);
app.controller('List', function($scope){
$scope.list = [{
Name: 'Ae',
id:'0000000-000-0000-00000',
}];
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
<\/script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="List">
<div dt-editable-list="list"></div>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', []);
app.directive('dtEditableList', ['$timeout',
function($timeout) {
return {
scope:{
dtEditableList: '=',
},
restrict: 'EA',
replace: true,
template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
controller: ['$scope', function($scope) {
$scope.inputList = $scope.dtEditableList;
$scope.remove = function(index){
$scope.inputList.splice(index, 1);
};
$scope.toggleEdit = function(input){
input.editMode = !input.editMode;
};
$scope.add = function(inputName){
if(inputName === "" || typeof inputName === 'undefined' ) return;
var add = {Name: inputName};
$scope.inputList.push(add);
$scope.newInput = "";
};
}]
};
}
]);
app.controller('List', function($scope){
$scope.list = [{
Name: 'Ae',
id:'0000000-000-0000-00000',
}];
});</script></body>
</html>
var app = angular.module('app', []);
app.directive('dtEditableList', ['$timeout',
function($timeout) {
return {
scope:{
dtEditableList: '=',
},
restrict: 'EA',
replace: true,
template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
controller: ['$scope', function($scope) {
$scope.inputList = $scope.dtEditableList;
$scope.remove = function(index){
$scope.inputList.splice(index, 1);
};
$scope.toggleEdit = function(input){
input.editMode = !input.editMode;
};
$scope.add = function(inputName){
if(inputName === "" || typeof inputName === 'undefined' ) return;
var add = {Name: inputName};
$scope.inputList.push(add);
$scope.newInput = "";
};
}]
};
}
]);
app.controller('List', function($scope){
$scope.list = [{
Name: 'Ae',
id:'0000000-000-0000-00000',
}];
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment