Fatal编程技术网
  • angularjs/
  • Angularjs如何在REST（删除）操作后更新视图？

Angularjs如何在REST（删除）操作后更新视图？

angularjs

Angularjs如何在REST（删除）操作后更新视图？,angularjs,Angularjs,这是我的控制器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 <!DOCTYPE html> <html> <head>

这是我的控制器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

<!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控制器

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();

    }
}
我想从表中删除一行，但它不起作用，请求工作正常，记录从数据库中删除，但当单击“删除”时它不起作用

我认为问题来自您的索引。。。。也许最好的办法是使用$index

看法

您的代码应该按预期工作。请验证您的html，因为它有几个问题。 根据下面帖子的评论，请验证您的java控制器是否接受删除请求。也许你应该换衣服

$http.delete
到

为了使它在客户端工作，它只是一个测试解决方案，而不是prod解决方案-这将意味着您有服务器问题 这种工作代码的平静可能会有所帮助

你能提供你的HTML视图代码，特别是数据绑定部分吗？好的，我会更新POSIT不起作用，当我单击delete时，我在控制台上给我一个错误，它是：o.s.web.servlet.PageNotFound:Request method'delete'不受支持此问题不是来自我共享的代码。。。，但是从你的后端服务器，你是说我的java控制器，在那里我有crud操作？我不这么认为，因为我测试了所有的服务，他们工作，我认为。。。只要评论一下$http.delete包含行和testIt就行了，我第一次做的事情，但是当我刷新时，我发现行没有被删除，我说也许我应该从服务器上删除，你能理解我的问题吗？nesteant，它与html无关，因为我可以删除行，但问题是当我刷新时，它没有被删除，因此我必须从服务器中删除该行。我刚刚通知您html中的问题。请检查有关$http.delete和$http.geti的部分，我将更新帖子，向您展示我的javacontroller@RequestMappingvalue=/deleteField未注释为DELETE方法。请将其更改为@RequestMappingvalue=/deleteField，method=RequestMethod.delete我更改了它，但仍然不支持请求删除 
$scope.deleteField = function(f, index){
var fields = $scope.fields;
$http.delete('/fields/' + f.id )
  .success(function(){
    fields.splice(index,1)
    $scope.fields = fields;
  });
};

$http.delete

$http.get

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