Question

这是我表格的一部分：

<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>

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

Answer 1

我不确定我理解你想要做什么但是在这里检索所有选定的行：

查看

<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; } }]);

Answer 2

您将在该字段上拥有编辑模式标记。这将由复选框设置：

<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

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

2 个答案: