下拉列表中的空字段

时间:2017-03-20 14:16:55

标签: html angularjs drop-down-menu ng-options

这是从API

加载正确的json数据的.js文件
   (function() {

      angular.module('application', [])
        .factory('Forecast', ['$http', '$q', function($http, $q) {
            var ApiAddr = "api.com/";
          var forecast = {};

          forecast.getResults = function(timeStart, timeEnd) {
            // We map application varaible names with API param names
            var httpParams = {
              type: "global",
              time: "minute",
              tsmin: timeStart,
              tsmax: timeEnd
            };
            return $http.get(ApiAddr, {
              params: httpParams,
              cache: true
            }).then(function(result) {
              return result.data;
            });
          };

          return forecast;

        }])
        .controller('SampleCtrl', ['$scope', 'Forecast', function($scope, Forecast) {
          $scope.forecastReport = '';

          $scope.getForecast = function() {

            var t1 = Date.parse($scope.timeStart);
            var t2 = Date.parse($scope.timeEnd);

            Forecast.getResults(t1, t2)
              .then(function(report) {
                $scope.result = report;
              }).catch(function(err) {
                $scope.result = '';
                console.error('Unable to fetch forecast report: ' + err);
              });
          };
        }]);

    })();

还有显示结果的HTML文件

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="application" ng-controller='SampleCtrl'>
    <div ng-controller="SampleCtrl">
        <label>Time Start</label>
            <input type="datetime-local" ng-model='timeStart'></input>
        <label>Time End</label>
            <input type="datetime-local" ng-model='timeEnd'></input>
        <button ng-click="getForecast()">Get Forecast</button>
        <label>Départements</label>
        <select ng-model='selecteditem' ng-options="result.zipcode for dept in result">
            <option value="">-- Choisir département --</option>
        </select>

        <div>
            <b>Forecast result: </b>
        </div>
        <pre>{{selecteditem.count}}</pre>

    </div>
</body>
</html>

问题如下。 我输入了两个日期,我获得了正确的json。

之后,当上传json数据时,我有下拉列表,当我点击下拉列表中的一个元素(部门的邮政编码)时,我显示了调用次数。

但是有一个问题:在下拉菜单中,我总是没有写过,即使它与JSON中的元素匹配。

此合并的原因是什么以及如何解决?

我有什么: The empty spaces in the drop down list

The result json output

3 个答案:

答案 0 :(得分:0)

更改ng-options语法,如下所示,因为result

中有对象数组
<select ng-model='selecteditem' ng-options="dept.zipcode as dept.count for dept in result">

答案 1 :(得分:0)

错误在ng-options中。正确的代码是:

<select ng-model='selecteditem' ng-options="dept.zipcode for dept in result">

答案 2 :(得分:0)

与ngoptions一起试试这个

ng-options =“dep.zipcode为结果跟踪dept的dep.count by result.id”