Вот базовая демонстрация, чтобы поиграть с вашим кодом, используя ng-show и ng-hide.Вы можете проверить это и настроить свой код
angular.module('App', []).controller('CrudCtrl', ['$scope',
function($scope) {
$scope.Profiles = [{
name: "gede",
country: "indonesia",
editable: false
},
{
name: "made",
country: "thailand",
editable: false
}
];
$scope.entity = {}
$scope.edit = function(index) {
$scope.entity = $scope.Profiles[index];
$scope.entity.index = index;
$scope.entity.editable = true;
}
$scope.delete = function(index) {
$scope.Profiles.splice(index, 1);
}
$scope.save = function(index) {
$scope.Profiles[index].editable = false;
}
$scope.add = function() {
$scope.Profiles.push({
name: "",
country: "",
editable: true
})
}
}
]);
/* Styles go here */
body {
margin: 10px;
font-size: 14px;
font-family: Arial;
}
table {
border: 1px solid #333;
border-collapse: collapse;
width: 100%;
}
table tr td {
border: 1px solid #333;
padding: 10px;
}
table tr td span {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="CrudCtrl">
<table>
<tr>
<td>Name</td>
<td>Country</td>
<td><span ng-click="add()">Add New</span></td>
</tr>
<tr ng-repeat="profile in Profiles">
<td>
<input type="text" ng-model="profile.name" ng-show="profile.editable">
<span ng-hide="profile.editable">{{ profile.name }}</span>
</td>
<td>
<input type="text" ng-model="profile.country" ng-show="profile.editable">
<span ng-hide="profile.editable">{{ profile.country }}</span>
</td>
<td>
<span ng-click="edit($index)" ng-hide="profile.editable">Edit</span>
<span ng-click="save($index)" ng-show="profile.editable">Save</span>
<span ng-click="delete($index)"> | Delete</span>
</td>
</tr>
</table>
</div>
</body>
</html>