The view:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl as vm">
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in vm.rows">
<td>
<input type="text" ng-model="row.name" ng-readonly="row.readonly" ng-disabled="row.readonly" on-focus="!row.readonly" />
</td>
<td>
<input type="text" ng-model="row.value" ng-readonly="row.readonly" ng-disabled="row.readonly" />
</td>
<td>
<button ng-click="vm.editRow($index)">{{row.readonly ? "Edit" : "Save" }}</button>
<button ng-click="vm.removeRow($index)">Remove</button>
</td>
</tr>
</tbody>
</table>
<br />
<input type="button" value="Add New" ng-click="vm.addNewRow('','')" />
</div>
</body>
</html>
The script:
angular.module('myApp', [])
.controller('MyCtrl', function () {
var vm = this;
vm.rows = [{"name": "aaa", "value" : 50, "readonly": true}, {"name": "bbb", "value" : 70, "readonly": true}];
vm.addNewRow = function(name, value) {
vm.rows[vm.rows.length - 1].readonly= true;
vm.rows.push({"name":"", "value":"", "readonly": false})
}
vm.removeRow = function(index) {
vm.rows.splice(index, 1);
}
vm.editRow = function(index) {
vm.rows[index].readonly = !vm.rows[index].readonly;
}
})
.directive('onFocus', function($timeout) {
return function(scope, element, attrs) {
scope.$watch(attrs.onFocus, function (newValue) {
if (newValue) {
$timeout(function () {
element.focus();
}, 0, false);
}
});
};
});
See the example in action on Plunker.
No comments:
Post a Comment