我通过Html发送数据并通过api获取数据以显示在表格中: -
<div class="form-group">
<label>Service:</label>
<select id="Service" ng-model="a.service">
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
<label>Data_SER:</label>
<select id="Data_SER" ng-model="a.data">
<option>data1</option>
<option>data2</option>
<option>data3</option>
</select>
<label class="col-md-5">Symbol:</label>
<input type="text" ng-model="a.symbol"/>
<label class="col-md-6">Price</label>
<input type="number" step="any" ng-model="a.price"/>
<label class="col-md-5">Date:</label>
<div class='input-group date' id='Date'>
<input type='text' ng-model="a.Date" name="date" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button type="button" class="btn btn-info btn-md" ng-click="getValue()">Fetch</button>
</div>
</div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in values">
<td>{{row.col1}}</td>
<td>{{row.col2}}</td>
<td>{{row.col3}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
<td>{{row.col6}}</td>
<td>{{row.col7}}</td>
<td>{{row.col8}}</td>
</tr>
</tbody>
</table>
我的指令代码是: -
(function () {
'use strict';
angular.module('myApp.components')
.directive('sevice', service);
service.$inject = ['$http','$timeout','ApiServices'];
function service($http, $timeout,ApiServices) {
return {
restrict: 'EA',
scope: {
},
link: function (scope, el, attrs) {
scope.a = {};
scope.activateDatePicker = function () {
$('#date').datetimepicker({
format: 'DD-MMM-YYYY',
showClose: true,
allowInputToggle: true,
widgetPositioning: {
horizontal: 'right',
vertical: 'auto'
}
});
};
scope.getValue = function () {
scope.a.Date = Date.parse($('input[name="date"]').val());
scope.a.Date = moment(scope.a.Date).format('DD-MMM-YYYY').toUpperCase();
scope.a.key = scope.a.service+ '' +scope.a.data+ '' +scope.a.symbol+ '' +scope.a.Date;
ApiServices.getValue(scope.a.key).then(
function (response) {
scope.values = response.data;
},
function (err) {
// Handle error here
console.log('Error' + JSON.stringify(err.data));
});
};
scope.activate = function () {
scope.activateDatePicker();
};
scope.activate();
},
templateUrl: 'js/components/folder/sevice_data.html'
};
}
})();
我的api代码是: -
getValue: getValue,
function getValue(key) {
console.log(key);
return $http({
method: 'GET',
url: '/api/services/' + key
});
}
当我点击api时,我在控制台errorNull
中没有得到任何响应或消息,我想我在代码中写错了。任何人都可以帮助我。