Angularjs如何更新REST（删除）操作之后有何看法？ [英] Angularjs how to update view after a REST (delete) operation?
本文介绍了Angularjs如何更新REST（删除）操作之后有何看法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的控制器的js
here's my controller js
$scope.deleteField = function(f){
$http.delete('/fields/' + f.id )
.success(function(){
var index = $scope.fields.indexOf(f);
$scope.fields.splice(index,1);
});
};
这是我的index.html
here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Catalogue</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-app="MyCat" ng-controller="CatController" >
<div ng-show="currentEntity==null">
<div class="container spacer" >
<form>
<table>
<tr>
<td><label>Nom Table:</label></td>
<td><input type="text" ng-model="entity.entityName"></td>
<td><button ng-click="saveTable()">Ajouter La table</button> </td>
</tr>
</table>
</form>
</div>
<div class="container spacer">
<table class="table table-hover spacer">
<thead>
<tr>
<th><button ng-click="deleteTables()">delete</button></th>
<th>ID</th>
<th>Nom Table</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in entities track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{t.id}}"/></td>
<td>{{t.id}}</td>
<td>{{t.entityName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</div>
<div class="container spacer" ng-show="currentEntity!=null">
<div class="alert alert-info">
Champs de la table {{currentEntity.entityName}}
<button ng-click="viewTables()">Afficher Les tables</button>
<button ng-click="view('structure')">Structure</button>
<button ng-click="view('form')">Formulaire</button>
<button ng-click="view('rows')">Rows</button>
</div>
<form ng-show="action=='structure'">
<table class="table">
<thead>
<tr>
<th></th><th>ID</th><th>Nom du Champs</th><th>Type</th><th>Relation</th><th>Input Type</th><td>Size</td><th>Primary</th><th>Index</th><th></th>
</tr>
<tbody>
<tr ng-repeat="f in fields track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<tr>
<td></td>
<td></td>
<td><input type="text" ng-model="field.fieldName"/></td>
<td><input type="text" ng-model="field.fieldType">
<option ng-repeat="dt in datatypes" value="{{dt.id}}">{{dt.typeName}}</option>
</td>
<td>
<select ng-show="field.fieldType.id==6" ng-model="field.relation.id">
<option value="null">----------</option>
<option ng-repeat="t in entities" value="{{t.id}}">
{{t.entityName}}
</option>
</select>
</td>
<td>
<select ng-model="field.inputType">
<option value="text">text</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio</option>
<option value="radio">select</option>
</select>
</td>
<td><input type="text" ng-model="field.size"/></td>
<td><input type="checkbox" ng-model="field.primary"/></td>
<td><input type="checkbox" ng-model="field.index"/></td>
<td><button ng-click="saveField()">Save</button></td>
</tr>
<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><input type="checkbox" ng-model="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.id}}</span>
<input type="text" ng-model="f.id" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.fieldName}}</span>
<input type="text" ng-model="f.fieldName" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.fieldType.typeName}}</span>
<input type="text" ng-model="f.fieldType.typeName" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.relation.entityName}}</span>
<input type="text" ng-model="f.relation.entityName" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.inputType}}</span>
<input type="text" ng-model="f.inputType" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.size}}</span>
<input type="text" ng-model="f.size" ng-show="f.editMode" /></td>
<td><span ng-show="!f.editMode">{{f.primary}}</span>
<input type="text" ng-model="f.primary" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.index}}</span>
<input type="text" ng-model="f.index" ng-show="f.editMode"/></td>
<td><button ng-click="deleteField(f)">delete</button></td>
<td><button ng-click="SaveEdits($index)" >saveEdits</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='form'">
<table class="table">
<tr ng-repeat="f in fields">
<td>{{f.fieldName}} :</td>
<td ng-show="f.relation==null"><input type="{{f.inputType}}" ng-model="records[f.id].value"/></td>
<td ng-show="f.relation!=null">
<select ng-model="records[f.id].value" >
<option ng-repeat="v in relations[f.id] track by $index" ng-value="{{v.id}}">
{{v.id}}
</option>
</select>
</td>
</tr>
<tr>
<td>
<button ng-click="saveRecord()">Save</button>
</td>
</tr>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='rows'">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th ng-repeat="f in fields">{{f.fieldName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in rows track by $index">
<td>{{r['id']}}</td>
<td ng-repeat="f in fields track by f.fieldName">{{r[f.fieldName]}}</td>
</tr>
</tbody>
</table>
</form>
</div>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
下面是我的Java控制器
Here's my java controller
package gen.controllers;
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import gen.dao.FieldRepository;
import gen.dao.FieldValueRepository;
import gen.dao.RecordRepository;
import gen.dao.TableEntityRepository;
import gen.dao.TypeRepository;
import gen.entities.Field;
import gen.entities.FieldValue;
import gen.entities.Record;
import gen.entities.TableEntity;
import gen.entities.Type;
import gen.model.DataFieldValue;
import gen.model.RecordValues;
import org.mockito.internal.util.reflection.Fields;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DDLController {
@Autowired
private TypeRepository typeRepository;
@Autowired
private TableEntityRepository tableEntityRepository;
@Autowired
private FieldRepository fieldRepository;
@Autowired
private RecordRepository recordRepository;
@Autowired
private FieldValueRepository fieldValueRepository;
@RequestMapping(value="/saveType")
public Type saveType(Type t){
typeRepository.save(t);
return t;
}
@RequestMapping(value="/getTypes")
public List<Type> saveType(){
return typeRepository.findAll();
}
@RequestMapping(value="/saveTable",method=RequestMethod.POST)
public TableEntity saveTable(@RequestBody TableEntity t){
tableEntityRepository.save(t);
return t;
}
@RequestMapping(value="/getTables",method=RequestMethod.GET)
public List<TableEntity> getTables(){
return tableEntityRepository.findAll();
}
@RequestMapping(value="/deleteTables",method=RequestMethod.POST)
public boolean deleteTables(@RequestBody ArrayList<TableEntity> ids){
System.out.println(ids.size());
tableEntityRepository.delete(ids);
return true;
}
@RequestMapping(value="/saveField")
public Field saveNField(@RequestBody Field f){
fieldRepository.save(f);
return f;
}
@RequestMapping(value="/deleteField")
public boolean deleteNField(long id){
fieldRepository.delete(id);
return true;
}
@RequestMapping(value="/UpdateField")
public Field UpdateNField(Field f){
fieldRepository.saveAndFlush(f);
return f;
}
@RequestMapping(value="/getFields")
public List<Field> getFields(TableEntity entity){
System.out.println("**************");
System.out.println(entity.getId());
List<Field> fields=fieldRepository.findByEntity(entity);
System.out.println(fields.size());
return fields;
}
@RequestMapping(value="/saveRecord")
public Record saveRecord(@RequestBody RecordValues values){
System.out.println("---------------");
TableEntity entity=new TableEntity();
entity.setId(values.getEntityID());
Record r=new Record();
r.setEntity(entity);
recordRepository.save(r);
System.out.println("entityID="+values.getEntityID());
for(DataFieldValue v:values.getRecord()){
Field f=new Field();
f.setId(v.getFieldID());
FieldValue fv=new FieldValue();
fv.setValue(v.getValue());
fv.setField(f);
fv.setRecord(r);
fieldValueRepository.save(fv);
System.out.println("FieldID="+v.getFieldID());
System.out.println("FieldValue="+v.getValue());
}
return r;
}
@RequestMapping(value="/getAllRecords")
public Collection<Map<String,String>>getRecords(Long entityID){
List<FieldValue> values=fieldValueRepository.getRecords(entityID);
TableEntity e=new TableEntity();e.setId(entityID);
//List<Field> fields=fieldRepository.findByEntity(e);
Map<Long, Map<String, String>> records=new HashMap<>();
Map<String, String> map2=new HashMap<>();
for(FieldValue fv:values){
if(records.get(fv.getRecord().getId())==null){
map2=new HashMap<String,String>();
map2.put("id", String.valueOf(fv.getRecord().getId()));
records.put(fv.getRecord().getId(),map2);
}
map2.put(String.valueOf(fv.getField().getFieldName()), String.valueOf(fv.getValue()));
}
return records.values();
}
}
我想删除表中的一行，但它不工作，要求工作正常，记录从数据库中删除，但在点击删除时，它不能正常工作
i want to delete a single row from table but it doesn't work , the request works fine , the record is deleted from the database but when clicking on delete it doesn't work
推荐答案
您code应该按预期工作。请验证您的HTML，因为它有几个问题。
据该文章的评论下面，请确认您的Java控制器接受DELETE请求。也许你应该改变
Your code should work as expected. Please verify your html as it has several issues. According to the comments from the post below please verify your java controller is accepting DELETE request. Probably you should change
$http.delete
到
$http.get
，以使其在客户端的工作（但是这只是测试解决方案，而不是督促一 - 这将意味着你有服务器问题）
可能工作code的这种和平将有助于
in order to make it work on client side (however it is just test solution but not prod one - this will mean that you have server issue) Possibly this peace of working code will help
<div ng-app ng-controller="Ctrl">
<table>
<tr ng-repeat="item in items track by $index">
<td>item {{item.name}}</td>
<td>
<button ng-click="deleteItem(item)">delete</button>
</td>
</tr>
</table>
function Ctrl($scope, $http) {
$scope.items = [{name: 1}, {name: 2}, {name: 3}];
$scope.deleteItem = function(item) {
$http.get('/')
.success(function() {
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
});
}
}
这篇关于Angularjs如何更新REST（删除）操作之后有何看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
