[英]How to execute a function on page load with ng-init() without being affect by other elements?
I've been away from coding for about 4 years, and now I'm re-learning programming with PHP 7 and AngularJs. 我已经远离编码大约4年了,现在我正在重新学习PHP 7和AngularJs的编程。 I build a simple CRUD application to study some concepts, and I have a simple table that display the records on my db, so far I've managed to sort the table and it works fine. 我构建了一个简单的CRUD应用程序来研究一些概念,我有一个简单的表,显示我的数据库中的记录,到目前为止我已经设法对表进行排序,它工作正常。 The problem is, I populate the table by calling a function with ng-init, it loads the function just fine, but the problem is, when I type on the TextBoxes above the table to insert a new Record, it keeps sorting out the table below. 问题是,我通过使用ng-init调用函数来填充表,它加载函数就好了,但问题是,当我在表上方的TextBox上键入以插入新的Record时,它会不断整理表下面。 And I've already google it but could not find an answer to my problem. 我已经谷歌了但是找不到我的问题的答案。 Hope someone can help me. 希望可以有人帮帮我。
<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>
I can only find an issue with this sort
links which is putting itself in infinite loop causing $rootScope:infdig .. Update them like so.. 我只能用这个发现的问题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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.