考虑一下我是Angular的新手,这给了我一个艰难的时刻。我一直在尝试不同的方法和代码
所以我有一个简单的视图,通过WEBapi从数据库获取/添加数据。
3个问题:
1 /为什么IE没有传递数据来查看? 2 /考虑到CHROME SUBMIT不起作用,我做错了什么? 3 /这两种浏览器的最佳方法是什么?
我无法弄清楚出了什么问题。 Chrome控制台找不到错误,但ngclick不提交表单。
另一方面,IE不显示列表中的数据,并在控制台中显示错误。
至于WEBapi被认为是可行的(通过浏览器和提琴手测试)。
的index.html
@{ Layout = null; }
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width" />
<title>MobilePostService Client Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/angular.min.js")
@Scripts.Render("~/Scripts/angular-route.min.js")
@Scripts.Render("~/Scripts/angular-resource.min.js")
@Scripts.Render("~/Scripts/App/module.js")
@Scripts.Render("~/Scripts/App/controller.js")
@Scripts.Render("~/Scripts/App/service.js")
<style>
table, tr, td, th {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body ng-app="APIModule" ng-controller="APIController">
<div class="row">
<div class="col-md-7">
<table>
<tr>
<th>NAME</th>
<th>CITY</th>
<th>STREET</th>
<th>POSTAL CODE</th>
<th>PHONE NR</th>
<th>EMAIL</th>
<th>REGISTRATION DATE</th>
</tr>
<tbody data-ng-repeat="par in parcel">
<tr>
<td>{{par.Name}}</td>
<td>{{par.City}}</td>
<td>{{par.Street}}</td>
<td>{{par.PostalCode}}</td>
<td>{{par.Phone}}</td>
<td>{{par.Email}}</td>
<td>{{par.RegistrationDate}}</td>
</tr>
</tbody>
</table>
@*<br /> <input type="button" ng-click="/new" value="Nowa paczka" />*@
@*<a href="/">NOWA PACZKA</a>*@
</div>
<div class="col-md-4">
<form ng-submit="addParcel()">
<table>
<tr> <td>Name</td> <td colspan=2><input type="text" ng-model="Name" /></td> </tr>
<tr> <td>City</td> <td colspan=2><input type="text" ng-model="City" /></td> </tr>
<tr> <td>Street</td> <td colspan=2><input type="text" ng-model="Street" /></td> </tr>
<tr> <td>PostalCode</td> <td colspan=2><input type="text" ng-model="PostalCode" /></td> </tr>
<tr> <td>Phone</td> <td colspan=2><input type="text" ng-model="Phone" /></td> </tr>
<tr> <td>Email</td> <td colspan=2><input type="text" ng-model="Email" /></td> </tr>
<!--<tr> <td>RegistrationDate</td> <td colspan=2><input type="text" ng-model="parcel.RegistrationDate" /></td> </tr>-->
@*<tr> <td>Submit</td> <td colspan=2><input type="click" id="submit" value="Submit"/></td> </tr>*@
</table>
<input type="submit" id="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
module.js(在这里推送其他.js的所有代码)
var app;
(function () {
app = angular.module("APIModule", []);
app.service("APIService", function ($http) {
this.getParcels = function () {
//nalezt zmienic urlBase na biezacy z wyszukiwarki
var urlBase = 'http://localhost:1797/api';
return $http.get(urlBase + '/webapi');
}
this.saveParcel = function (par) {
var urlBase = 'http://localhost:1797/api';
return $http.post(urlBase + '/webapi', par);
}
});
app.controller("APIController", function ($scope, APIService) {
getAll();
$scope.getAll = function () {
var servCall = APIService.getParcels();
servCall.then(function (d) {
$scope.parcel = d.data;
});
};
$scope.addParcel = function () {
var parcel = {
Name: $scope.Name,
PostalCode: $scope.PostalCode,
City: $scope.City,
Phone: $scope.Phone,
Email: $scope.Email,
Street: $scope.Street,
RegistrationDate: new Date()
};
var saveParcel = APIService.saveParcel(parcel);
saveParcel.then(function (d, $scope) {
//tutaj zwracam
$scope.getAll();
});
};
});
})();