2016-12-01 20 views
1

我已經遠離編碼約4年,現在我重新學習編程與PHP 7和AngularJs。我建立一個簡單的CRUD應用研究的一些概念,我有一個簡單的表,關於我的數據庫顯示的記錄,到目前爲止,我已經成功地對錶進行排序,它工作正常。問題是,我通過調用NG-初始化函數填充表,它加載的功能就好了,但問題是,當我在桌子上方的文本框鍵入插入一個新的記錄,它一直整理出表下面。我已經谷歌它,但無法找到我的問題的答案。希望可以有人幫幫我。而不會受到其他因素的影響如何執行與NG-的init()頁面加載的功能?

<body > 
<div class="container"> 
    <div class="row text-center"> 
     <h1>BANCO PHP - CADASTRO DE CLIENTES</h1> 
     <hr> 

    </div> 
    <div ng-app="myApp" ng-controller="cntrl" ng-init="showclientes()"> 
    <div class="row container"> 

     <div class="col-md-8"> 
      <form class="form-inline"> 
      <div class="form-group"> 
      <label for="id">Id</label> 
      <input type="text" class="form-control" placeholder="Id" id="id" ng-model="id" disabled> 
      </div> 
      <div class="form-group"> 
      <label for="nome">Nome</label> 
      <input type="text" class="form-control" placeholder="Nome" id="nome" ng-model="nome"> 
      </div> 
      <div class="form-group"> 
      <label for="saldo">Saldo</label> 
      <input type="text" class="form-control" placeholder="Saldo" id="saldo" ng-model="saldo"> 
      </div> 

      <input type="submit" class="btn btn-default" value="{{nomebotao}}" ng-click="insertdata()"> 

      </form> 
      </div> 
      <div class="col-md-4"><label class="bg-success">{{msg}}</label> 
     </div> 
      </div> <!-- div row form --> 


     <div class="row container"> 
      <hr> 
      <h3>RESULTADOS</h3> 
      <hr> 
     </div> 
     <div class="row col-md-6"> 
     <table class="table"> 
     <thead> 
      <tr> 

      <th><a href="#" ng-click="tipoOrdem = 'id*1'">Id<span ng-show="tipoOrdem == 'id'; ordemReversa = !ordemReversa" class="fa fa-caret-down"></span> 
      </a></th> 


      <th><a href="#" ng-click="tipoOrdem = 'nome'">Nome<span ng-show="tipoOrdem == 'nome'; ordemReversa = !ordemReversa" class="fa fa-caret-down"></span> 
      </a></th> 


      <th><a href="#" ng-click="tipoOrdem = 'saldo'">Saldo<span ng-show="tipoOrdem == 'saldo'; ordemReversa = !ordemReversa" class="fa fa-caret-down"></span> 
      </a></th> 

      </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="cliente in data | orderBy:tipoOrdem:ordemReversa"> 

      <td>{{cliente.id}}</td> 
      <td>{{cliente.nome}}</td> 
      <td>{{cliente.saldo}}</td> 
      <td><button ng-click="deletecliente(cliente.id)" class="btn btn-danger fa fa-trash-o fa-lg"></button> 
      <td><button ng-click="updatecliente(cliente.id, cliente.nome, cliente.saldo)" class="btn btn-primary fa fa-edit fa-lg"></button> 

     </tr> 
     </tbody> 
     </table> 
     </div> <!-- div row table --> 


    </div> <!-- div controler --> 

</div> <!-- div main container --> 


<!-- javascript funcoes --> 

<script> 
var app=angular.module('myApp', []); 
app.controller('cntrl', function($scope, $http){ 

    $scope.tipoOrdem = 'id*1'; 
    $scope.ordemReversa = false; 
    $scope.nomebotao="Salvar"; 



    $scope.insertdata=function(){ 

     $http.post("insert.php", {'id':$scope.id, 'nome':$scope.nome, 'saldo':$scope.saldo, 'botao':$scope.nomebotao}) 
     .success(function(){ 

      $scope.msg= "Data Saved"; 
      $scope.showclientes(); 
     }); 
    } 

    $scope.showclientes=function(){ 
     $http.get("select.php") 
     .success(function(data){ 

      $scope.data=data 

     }); 

    } 


    $scope.deletecliente=function(id){ 
     $http.post("delete.php", {'id':id}) 
     .success(function(){ 
      $scope.msg="Registro excluído."; 
      $scope.showclientes(); 
     }); 
    } 

    $scope.updatecliente=function(id,nome,saldo){ 

     $scope.id=id; 
     $scope.nome=nome; 
     $scope.saldo=saldo; 
     $scope.nomebotao="Atualizar"; 

    } 



}); 

</script> 

</body> 
+0

我可以問你爲什麼用'標識* 1 '而不是僅僅'id'? – Searching

+0

當我僅使用id時,排序工作不正確,它會按如下排序:1 12 13 2 3 4。我不知道爲什麼! –

+0

嗯,我剛剛通過如下排序鏈接嘗試它。它似乎並沒有現在。嘗試這個http://jsfiddle.net/maxcache/b2L02ggr/2/?這可能是由於不正確的綁定,它只是在做所有的事情。如果你的id作爲字符串傳遞,也可能導致你提到的問題。但作爲一個int /數字它應該工作.. – Searching

回答

0

我只能找到這個sort鏈接這是把自己在無限循環導致$rootScope:infdig的問題..像這樣更新他們..

<th><a href="#" ng-click="tipoOrdem = 'id';ordemReversa = !ordemReversa">Id<span ng-show="tipoOrdem == 'id' && ordemReversa" class="fa fa-caret-down"></span> 
</a></th> 


<th><a href="#" ng-click="tipoOrdem = 'nome';ordemReversa = !ordemReversa">Nome<span ng-show="tipoOrdem == 'nome' && ordemReversa" class="fa fa-caret-down"></span> 

</a></th> 


<th><a href="#" ng-click="tipoOrdem = 'saldo';ordemReversa = !ordemReversa">Saldo<span ng-show="tipoOrdem == 'nome' && ordemReversa" class="fa fa-caret-down"></span> 
</a></th> 
相關問題