下拉列表中的空字段
Empty fields in drop-down list
这是加载正确 json 数据的 .js 文件,来自 API
(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
更改 ng-options 语法如下,因为您在 result
中有对象数组
<select ng-model='selecteditem' ng-options="dept.zipcode as dept.count for dept in result">
错误在 ng-options 中。正确的代码是:
<select ng-model='selecteditem' ng-options="dept.zipcode for dept in result">
连同 ngoptions 试试这个
ng-选项="dep.zipcode as dep.count for dept in result track by result.id"
这是加载正确 json 数据的 .js 文件,来自 API
(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
更改 ng-options 语法如下,因为您在 result
<select ng-model='selecteditem' ng-options="dept.zipcode as dept.count for dept in result">
错误在 ng-options 中。正确的代码是:
<select ng-model='selecteditem' ng-options="dept.zipcode for dept in result">
连同 ngoptions 试试这个
ng-选项="dep.zipcode as dep.count for dept in result track by result.id"