如何使用angularjs基于文本框编辑行

How to edit a row using angularjs based on text boxes?

本文关键字：文本 编辑 何使用 angularjs 于文本      更新时间：2023-09-26

这是我表单的一部分:

<tr ng-repeat="f in fields"  track by $index" class="clickable" >
       <td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{f.id}}"/></td> 
      <td>{{f.id}}</td>
      <td>{{f.fieldName}}</td>
      <td>{{f.fieldType.typeName}}</td>
       <td>{{f.relation.entityName}}</td>
      <td>{{f.inputType}}</td>
      <td>{{f.size}}</td>
      <td>{{f.primary}}</td>
      <td>{{f.index}}</td>
      <td><button ng-click="deleteField($index)">delete</button></td> 
       <td><button ng-click="UpdateField($index)">Update</button></td> 
</tr>

我应该在控制器中做什么?

我不确定我明白你想做什么但这里的方式来检索所有选定的行:

<<p> 视图/strong> 
<tr>
       <td><input type="checkbox" ng-model="f.selected" value="1"/></td> 
      <td>{{f.id}}</td>
      <td>{{f.fieldName}}</td>
      <td>{{f.fieldType.typeName}}</td>
       <td>{{f.relation.entityName}}</td>
      <td>{{f.inputType}}</td>
      <td>{{f.size}}</td>
      <td>{{f.primary}}</td>
      <td>{{f.index}}</td>
      <td><button ng-click="deleteField($index)">delete</button></td> 
       <td><button ng-click="UpdateField($index)">Update</button></td> 
</tr>
控制器

app.controller('Ctrl'[function(){
  $scope.getAllSelected = function() {
     var result =[];
     angular.forEach($scope.items, function(item) {
         if (item.selected) {
             result.push(item);
             return;
         }
     });
     return result;
  }
}]);

您将在字段上有一个编辑模式标志。这将由复选框设置:

<td><input type="checkbox" ng-model="f.editMode"/></td>

在你的视图中，你可以使用ng-show来显示/隐藏一个文本框:

<td>
  <span ng-show="!f.editMode">{{f.fieldName}}</span>
  <input type="text" ng-model="f.fieldName" ng-show="f.editMode"/>
</td>

我还决定只在编辑模式下显示更新按钮:

<td><button ng-click="updateField($index)" ng-show="f.editMode">Update</button></td>

然后在你的控制器中，你的删除和更新将需要调用后端来执行相关的操作。

$scope.deleteField = function (index) {
  var field = $scope.fields[index];
  var url = '/fields/' + field.id;
  $http.delete(url).then(function () {
    $scope.fields.splice(index, 1);
  });
};
$scope.updateField = function (index) {
  var field = $scope.fields[index];
  var url = '/fields/' + field.id;
  $http.put(url, field).then(function () {
    field.editMode = false;
  });
};

Plunkr

相关文章：