Question

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

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

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

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

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

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

我认为查询整个表格，编码为JSON，然后将其作为Angular控制器进行访问会更好。

我只看过ng-repeat指令的例子，它显示了整个表格，但是我没有运气找到一个指令或管道装置让我根据年龄得到死亡概率例如，类似于MySQL查询的方式。

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

Answer 1

这实际上取决于您的数据有多大以及用户使用滑块的频率。

但是一般建议它只提取向用户呈现UI所需的数据，但是如果响应包含一小组数据（仍有争议）它可以作为一个整体获取并保存在内存中。

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

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

按照OP的更新

进行修改

＆＃13;

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
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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
        });
    });
});

angularjs $ http.get按类别过滤

1 个答案: