[英]How to bind json data to angularJS view using $scope?
我有一个要从后端显示到前端的JSON响应,因此在下面的情况下,我无法将$scope
值绑定到view.if如果我将响应更改为对象而不是将其填充为array.How如何填充array对象到视图?
main.html
<div class="row">
<div class="form-group col-md-6">
<div class="col-md-3">
<label for="workerName">Full Name:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" name="workerName" ng-model="data.firstName">
</div>
</div>
<div class="form-group col-md-6">
<div class="col-md-3">
<label for="workerName">Address:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" name="workerName" ng-model="data.lastName">
</div>
</div>
</div>
app.js
var Obj = [{firstName: "Mike", lastName:"wegner"},{firstName:"John",lastName:"Ruch"}];
app.get('/test', function (req, res) {
res.send(Obj);
});
workerFacotry.js
angular.module('myApp').factory('workerFactory', function ($http) {
'use strict';
return {
getData: function(){
return $http.get('/test');
}
}
});
workerController.js
angular.module('myApp').controller('WorkerController', function ($scope,workerFactory) {
'use strict';
$scope.test = function(){
alert("first functiona is working");
};
$scope.data = [];
$scope.getTestData = function(){
workerFactory.getData().then(function(response){
$scope.data = response.data;
console.log("Data from server",$scope.data);
})
}
});
Json.js
[{
"firstName": "Mike",
"lastName": "wegner"
}, {
"firstName": "John",
"lastName": "Ruch"
}]
使用ngRepeat
指令遍历data
如下所示:
<div class="row" ng-repeat="d in data">
<div class="form-group col-md-6">
<div class="col-md-3">
<label for="workerName">Full Name:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" name="workerName" ng-model="d.firstName">
</div>
</div>
<div class="form-group col-md-6">
<div class="col-md-3">
<label for="workerName">Address:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" name="workerName" ng-model="d.lastName">
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.