2016-12-01 4 views
1

저는 약 4 년 동안 코딩을 해왔습니다. 이제 PHP 7과 AngularJs로 프로그래밍을 다시 배우고 있습니다. 몇 가지 개념을 공부하기 위해 간단한 CRUD 응용 프로그램을 빌드하고, 지금까지 테이블을 정렬 할 수 있었지만 잘 작동하는 간단한 DBA 레코드를 표시합니다. 문제는 ng-init 함수를 호출하여 테이블을 채우는 것입니다. 함수를 잘로드하지만 문제는 테이블 위에 TextBox를 입력하여 새 레코드를 삽입 할 때 테이블을 정렬하는 것입니다. 이하. 그리고 나는 이미 그것을 google했지만 내 문제에 대한 답변을 찾을 수 없습니다. 누군가 나를 도울 수 있기를 바랍니다. 당신이`ID를 사용하는 이유다른 요소에 영향을받지 않고 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> 
난 단지 .. $rootScope:infdig의 원인이 무한 루프에 자신을 가하고이 sort 링크에 문제를 찾을 수 있도록처럼 그들을 업데이트 할 수 있습니다
+0

나는 * 1 요청할 수 있음 ''id '대신에 할 것인가? – Searching

+0

ID를 사용하면 정렬 작업이 잘못되어 다음과 같이 정렬됩니다. 1 12 13 2 3 4. 나는 이유를 모른다! –

+0

흠 나는 아래의 정렬 링크로 시도해 보았습니다. 지금은 보이지 않습니다.이 http://jsfiddle.net/maxcache/b2L02ggr/2/로 시도해보십시오. 그것은 잘못된 바인딩으로 인해 모든 일을하고 있었을 가능성이 있습니다 .. 귀하의 ID가 당신이 언급 한 문제를 일으킬 수있는 문자열로 전달되는 경우. 하지만 int/number로 작동해야합니다 .. – Searching

답변

0

..

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