mysql - angularjs $http.get 按类别过滤

Question

假设我在 MySQL 数据库中有一些这样的数据:http://www.ssa.gov/oact/STATS/table4c6.html

我想创建一个带有显示相应死亡概率的年龄 slider 的页面。

我的第一个想法是通过使用 MySQL 查询来解决这个问题，例如:

GET 'death_prob' where 'age' = {slider_value} and 'gender' = 'male';

然后，只要 slider 值发生变化，就会触发一个 ajax 事件，这将重新查询数据库并显示结果，而无需刷新页面。这种方法的问题在于，当用户摆弄 slider 时，可能会有数百个请求，这似乎不太理想。

我在 Angular SQL 上阅读了这个 w3schools 页面:http://www.w3schools.com/angular/angular_sql.asp

我认为最好的做法是查询整个表，编码为 JSON，然后将其作为 Angular Controller 访问。

我只看过显示整个表格的 ng-repeat 指令的示例，但我没有找到任何指令或管道方式让我根据年龄获得死亡概率，例如类似于MySQL 查询的方式。

某处是否有关于此的文章或 jsfiddle 示例？这甚至是传统的吗？

Answer 1

这实际上取决于你的数据有多大，以及用户可能使用 slider 的频率。

但一般建议它仅获取向用户呈现 UI 所需的数据，但如果响应包含少量数据(仍有争议)整体抓取并保存在内存中是可以的。

如果服务器调用事件非常频繁，您应该使用某种去抖动以方便您和用户。对于例如。使用模型选项

ng-model-options="{ updateOn: 'default blur', debounce: { default: 300, blur: 0 } }"

根据 OP 的更新进行编辑

var app = angular.module('myApp', []);
app.controller('actuarialCtrl', function($scope, $http) {
  $scope.search = {
    age: 65
  };

  function makeRequest(query) {
    return $http.get("http://www.rad-site.com/query2.php", {
      params: query ? query : null
    });
  }

  function updateScope(response) {
    $scope.ages = response.records;
  }
  makeRequest().success(updateScope);

  $scope.$watch('search.age', function(newVal, oldVal) {
    makeRequest({
      age: newVal
    }).success(updateScope);
  });

  angular.element(document).ready(function() {
    $("#slider-range-max").slider({
      range: "max",
      min: 1,
      max: 119,
      value: $scope.search.age
    }).on("slidechange", function(event, ui) {
      $scope.search.age = ui.value;
      $scope.$apply(); // make sure to call this
    });
  });
});

body {
  padding-top: 60px;
}
@media (max-width: 980px) {
  body {
    padding-top: 0;
  }
}
#sliderspacer {
  margin-bottom: 20px;
  max-width: 600px;
}
.form-control {
  max-width: 100px;
}
#mfradio {
  max-width: 600px;
  padding: 15px;
  background-color: #F4F4F4;
  border: 1px solid #e5e5e5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://www.rad-site.com/bootstrap.js"></script>
<link href="http://www.rad-site.com/bootstrap.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
  <div class="row-fluid">
    <div class="span12">
      <h1>Period Life Expectancy Based on Age</h1>

      <h3>Source: Social Security Agency</h3>

      <hr>
      <div ng-app="myApp" ng-controller="actuarialCtrl">
        <p>
          <label for="amount">Age:
            <input type="text" ng-model="search.age" id="amount" class="form-control">
          </label>
          <div id="sliderspacer">
            <div id="slider-range-max"></div>
          </div>
        </p>
        <div id="mfradio">
          <div class="radio">
            <label ng-model="male">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Male</label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Female</label>
          </div>
        </div>
        <br>
        <table id="searchTextResults" class="table">
          <tr ng-repeat="x in ages | filter:searchText:true">
            <td>{{ x.age }}</td>
            <td>{{ x.deathprob }}</td>
            <td>{{ x.numlives }}</td>
            <td>{{ x.lifeexp }}</td>
            <td>{{ x.gender }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

var app = angular.module('myApp', []);
app.controller('actuarialCtrl', function ($scope, $http) {
    $scope.search = { age : 65 };

    function makeRequest(query) {
        return $http.get("http://www.rad-site.com/query2.php", {
            params: query ? query : null
        });
    }

    function updateScope(response) {
        $scope.ages = response.records;
    }
    makeRequest().success(updateScope);

    $scope.$watch('search.age', function (newVal, oldVal) {
        makeRequest({ age : newVal }).success(updateScope);
    });

    angular.element(document).ready(function () {
        $("#slider-range-max").slider({
            range: "max",
            min: 1,
            max: 119,
            value: $scope.search.age
        }).on( "slidechange", function( event, ui ) {
            // you don't necessarily need to debounce as you have 
            // slidechange event, which will only update once the value changed
            $scope.search.age = ui.value;
            $scope.$apply(); // make sure to call this
        });
    });
});