按类别划分的$http.get滤波

Question

假设在MySQL数据库中有一些数据，如下所示：http://www.ssa.gov/oact/STATS/table4c6.html

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

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

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

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

我在w3schools SQL：sql.asp上阅读了这个页面

我认为更好的做法是查询整个表，将其编码为JSON，然后作为角控制器访问它。

我只看过ng-重复指令的例子，它显示了整个表，但我还没有找到一个指令或管道方法，它可以让我根据年龄获得死亡概率--例如，类似于MySQL查询的方式。

有没有一篇关于这个的文章，或者是一个弹琴的例子？这是传统吗？

Answer 1

这实际上取决于数据的大小和用户使用滑块的频率。

但是，一般的建议是只获取将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
        });
    });
});