Question

我在数据库表中有一些数据，我使用angular来显示它。我使用页脚中的以下脚本来执行此操作：

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

我试图将角度脚本放在点击功能上，但它不起作用。我需要的是在添加后再次重新加载相同的位置。任何想法。

Answer 1

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>

Answer 2

如果您只想在事务处理后刷新表中的数据列表，则可以使用此脚本。您不需要在添加按钮上添加刷新功能。在加载数据上使用它。

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时加载更新的选择数据。时间间隔您可以根据需要更改时间间隔。

如何在不刷新页面的情况下更新角度数据？

2 个答案: