[英]How to update angular data without refreshing the page?
我在数据库表中有一些数据,我使用角度来显示它。 我使用页脚中的以下脚本来执行此操作:
<script !src="">
var app = angular.module('enterprise', []);
app.controller('entercontroller', function($scope, $http){
$scope.loadData= function(){
$http.post('<?php echo base_url(); ?>Groups_/load_data')
.then(function(mydata){
console.log(mydata);
$scope.datas = mydata.data;
});
};
$scope.loadData();
});
</script>
我的控制器中的 load_data() 函数如下:
public function load_data(){
$data["groups"] = $this->Groups->fetch_groups();
return $this->output
->set_status_header(200)
->set_content_type('application/json', 'utf-8')
->set_output(json_encode($data["groups"], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));
}
我的观点是一些带有提交按钮的输入。 我需要的是当我单击按钮添加新记录时,表格会自动更新,而无需每次刷新页面。 所以我制作了另一个脚本来这样做
<script>
$(document).ready(function() {
$('#add').on('submit', function() {
var that = $(this);
$dataString = that.serialize();
$.ajax({
url: '<?php echo base_url(); ?>'+ $("#uri").val() ,
type: 'POST',
dataType: 'json',
cache:false,
data : $dataString,
success: function (data) {
console.log(data);
$('#message').html(data['message']);
$(':input','#add')
.removeAttr('checked')
.removeAttr('selected')
.not(':button, :submit, :reset, :hidden, :radio, :checkbox')
.val('');
},
error: function (data) {
console.log('error');
console.log(data);
}
});
return false;
});
});
</script>
HTML 代码如:
<div class="page-wrapper" ng-app="enterprise" ng-controller="entercontroller">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-block">
<form class="floating-labels m-t-40" method="post" id="add" action="addgroup">
<div class="form-group m-b-40">
<input type="text" name="group_title" class="form-control input-lg" id="input8" required><span class="bar"></span>
<label for="input8">Group Name</label><br />
</div>
<div class="form-group m-b-40">
<input type="text" name="group_link" class="form-control input-lg" id="input7" required><span class="bar"></span>
<label for="input7">Link</label>
</div>
<div class="form-group m-b-40">
<select name="group_icon_code" class="custom-select form-control" id="location1" required >
<option value="">Icon</option>
<?php
if(isset($icons))
foreach($icons as $icon)
echo '<option value="'.$icon->icon_value.'">'.$icon->icon_name.'</option>';
?>
</select>
</div>
<div class="text-xs-right">
<input type="hidden" id="uri" name="uri" value="Groups_/addgroup" />
<button type="submit" ng-click="loadData()" name="add" value="1" class="btn btn-success"> <i class="fa fa-check"></i> save</button>
<button type="reset" class="btn btn-inverse"> <i class="fa fa-times"></i> cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-block">
<div class="table-responsive">
<table class="table color-bordered-table inverse-bordered-table">
<thead>
<tr>
<th>title</th>
<th>link</th>
<th>order</th>
<th>icon</th>
<th class="text-nowrap">control</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in datas">
<td>{{ d.group_title }}</td>
<td>{{ d.group_link }}</td>
<td>{{ d.group_order }}</td>
<td><i class="mdi {{ d.group_icon_code }}"></i></td>
<td class="text-nowrap">
<a href="#" data-toggle="tooltip" data-original-title="Edit"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
<a href="#" data-toggle="tooltip" data-original-title="Delete"> <i class="fa fa-close text-danger"></i> </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我试图将角度脚本放在点击功能中,但它不起作用。 我需要的是在添加后再次重新加载相同的位置。 有任何想法吗。
AngularJS 主要用于双向数据绑定,这似乎是您正在寻找的。 如果您使用 Angular,则不需要使用 JQuery 来更新数据。 $scope
中声明的所有变量在更改时会自动刷新
因此,您在加载角度控制器时已经在发布数据。 我会将它包含在附加到范围的函数中,因此在单击按钮时,您可以发布您的对象,然后将其插入表格中。
var app = angular.module('enterprise', []); app.controller('entercontroller', function($scope, $http){ $scope.tableData = [{ text: "First row" }, { text: "second row" }]; $scope.loadData = function () { // here you do your http post var newRow = { text: "New Row" }; $scope.tableData.push(newRow); // do this inside your http callback function } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script> <body ng-app="enterprise" ng-controller="entercontroller"> <table> <tr ng-repeat="row in tableData"> <td> {{row.text}} </td> </tr> </table> <button ng-click="loadData()"> Load data </button> </body>
如果您只想在事务后刷新表中的数据列表,则可以使用此脚本。 您不需要在添加按钮上添加刷新功能。 在您的负载数据上使用它。
angular.module('app', []) .controller('ctrl', function($scope, $timeout) { $scope.IntervalTime = 2000; $scope.updatedData = 0; timeoutFn(); function timeoutFn() { $timeout(function() { //Add your select data query here $scope.updatedData++; timeoutFn(); }, $scope.IntervalTime); } })
<script src="//unpkg.com/angular/angular.js"></script> <div ng-app='app' ng-controller='ctrl'> <table style="width:50%; height: 50%;"> <tr> <th>Data</th> </tr> <tr> <td>{{updatedData}}</td> </tr> </table> </div> <style> table, th, td { border: 1px solid black; text-align: center; } </style>
注意:您的表格将每 2 秒刷新一次并加载更新的选择数据,因为我将其设置为 $scope.Interval 您可以根据需要更改间隔。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.