Question

我有一个应用程序，它通过从mySQL数据库中检索数据来显示一个表（xeditable）。

显示内容的数据库表在后台不断变化，我试图找出如何在UI中反映这些更改，而不是每次在数据库中进行更改时刷新页面或整个表。 / p>

基本上，我想将更改“推送”到视图，并在数据库中检测到更改。

据我所知，这不适用于PHP / MySQL所以我想必须通过使用第三方库甚至中间层nodeJS来解决它...

我在google的firebase（使用ReactJS）上阅读了如何实现OTB并认为可以在不重写整个应用程序的情况下完成。

有什么想法吗？

我当前代码库的片段：

app.js

var app = angular.module('myApp', ['ui.bootstrap','countTo','xeditable']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});

app.filter('abs', function () {
  return function(val) {
    return Math.abs(val);
  }
});

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

app.config(['$compileProvider', function($compileProvider) {
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|file|data):/);
}]);



app.controller('customersCrtl', function ($scope, $http, $timeout, $interval, $window) {
    var init =  function loadItems(){
    $scope.$emit('LOAD');
    $scope.progressBar = { progress : 0 };
    $http.get('ajax/getItems.php').success(function(data){
        $scope.list = data;
        $scope.updateID = data.updateID;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 50; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter
        $scope.totalItems = $scope.list.length;
        $scope.priceInfo = {
          min: 0,
          max: 100000
        }
        $scope.$emit('UNLOAD');

        var array = $scope.list;
        var flags = [], output = [], l = array.length, i;
        for(i=0; i<l; i++) {
            if( flags[array[i].category]) continue;
            flags[array[i].category] = true;
            output.push(array[i].category);
        }

        var array_manufact = $scope.list;
        var flags = [], output_manufact = [], l = array_manufact.length, i;
        for( i=0; i<l; i++) {
            if( flags[array_manufact[i].manufacturer]) continue;
            flags[array_manufact[i].manufacturer] = true;
            output_manufact.push(array_manufact[i].manufacturer);
        }

        $scope.cats = output;
        $scope.manufact = output_manufact;

        //console.log($scope.cats);


    });

    (function progress(){
        if($scope.progressBar.progress < 100){
            $timeout(function(){
                $scope.progressBar.progress += 1;
                progress();
            },5);
        }
    })();

的index.html：

<html>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | filter:{category:by_cat} | filter:{notes:by_notes} | filter:{Locked:by_search_locked} | filter:{external_link:by_external_link} | filter:{name:by_name} | filter:{cat2:by_cat2} | filter:{errorStatus:search`enter code here`_status} | filter:{error_status:search_status_opt} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" ng-class="{'success' : data.error_status=='--example1--', 'warning' : data.place_1_name!='my_stock', 'danger' : data.error_status == 'not loaded'}">
        <td ng-class='{red : data.Locked==1}'><center>{{data.ID}}</center></td>
        <td ng-class='{red : data.Locked==1}'><center>{{data.name}}</center></td>
        <td ng-class='{red : data.Locked==1}'>
        <center>
            cat: {{data.category}}
            <br/>
            cat2: {{data.category2}}
        </center></td>
        <td ng-class='{red : data.Locked==1}'><center>{{data.price}}</center></td>
        <td ng-class='{red : data.Locked==1}'><center>
            <div ng-if="data.notes.length > 0">
                <div ng-repeat="i in data.notes">
                    <b><font color="red">{{i}}</font></b>                           
                </div>
            </div>
            <div ng-if="data.notes.length==0">
                ---
            </div>
        </center>
        </td>
        <td ng-class='{red : data.Locked==1}'>
        <center>
          <div ng-if="data.minPrice !=''">
            <a href="#" editable-text="data.minPrice" onbeforesave="updateMinPrice(data.productID,$data)">
              <font class='green'>{{data.minPrice}}</font>                                                  
            </a>                                        
            <span ng-if="data.minPrice_last_changed!='---'">
                <br/>
                <br/>
                    LastChangedON:&nbsp;<font dir="ltr">{{data.minPrice_last_changed}}</font>
            </span>

          </div>
          <div ng-if="data.minPrice == '' ">
              <div editable-text="data.minPrice" onbeforesave="updateMinPrice(data.productID,$data)">
                <font class='orange'>click to add</font>
              </div>
          </div>
        </center></td>
</html>

Answer 1

使用$interval ¹服务轮询您的终端

app.controller('MainCtrl', function($scope, $http, $interval) {

    $interval(function(){

       $http.get('/api/metrics').then(function(res){

           $scope.data = res.data;

       });

    },5000);
});

以下plunker模拟使用$interval

对端点进行轮询

https://docs.angularjs.org/api/ng/service/ $间隔

如何在不刷新的情况下从数据库更新AngularJS表单元格值

1 个答案: