I have a problem of trying to make the input text field editable.
Currently, I am unable to make the input text box editable on click of add or edit button.
I have set the values statically in the state objects.
How can I edit the code below to make the input text box editable?
The sample code is as below HTML
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" input-disabled="editableInput"/>
<button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Add</button>
<table>
<tr ng-repeat="x in records">
<td><h4>{{x}}</h4></td>
<td><button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Edit</button></td>
</tr>
</table>
</body>
</html>
Script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
app.directive("inputDisabled", function(){
return function(scope, element, attrs){
scope.$watch(attrs.inputDisabled, function(val){
if(val) {
element.removeAttr("disbaled");
} else {
element.attr("disabled", "disabled");
}
});
}
});
Any Help would be much appreciated.