我已在 Controller 中从使用 $scope
对象转换为使用 vm = this
。我知道您必须在 view
或 state
中声明一个 controllerAs
。
我有两个使用ng-repeat
的表,第一个表工作正常,所有数据都已填充,但第二个表由于某种原因没有。我已经尝试过,用户单击的项目已记录在控制台中,但第二个表未填充数据。与 $scope
配合良好。
知道我哪里出错了吗?
var app = angular.module('myApp', ['ngRoute', 'ui.router']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$routeProvider', function($stateProvider, $locationProvider, $urlRouterProvider, $routeProvider) {
$urlRouterProvider
.when('/', '/patents/')
.otherwise('/patents/');
$stateProvider
.state("patents", {
url: "/patents",
templateUrl: "templates/patents/list/list-patents.htm",
controller: "patentCtrl",
controllerAs: "patents"
})
.state("patents.item", {
url: "/:id",
templateUrl: "templates/patents/list/patent-item.htm",
controller: "patentCtrl",
controllerAs: "item"
})
}]);
app.factory('patentsService', function($http, $q) {
var factory = {};
var REST_SERVICE_URI = 'http://localhost:8080/Sprint002b/restpatent/';
factory.fetchAllPatents = function() {
var deferred = $q.defer();
$http.get(REST_SERVICE_URI)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while fetching Users');
deferred.reject(errResponse);
}
);
return deferred.promise;
}
factory.select = function(item) {
selectedItem = item;
return selectedItem;
}
return factory;
});
app.controller('patentCtrl', ['patentsService', function(patentsService) {
var vm = this;
vm.patent={id:null, patentApplicationNumber:'', clientRef: '', renewalStatus: '', currentRenewalCost: '', costBandEndDate:'', renewalCostNextStage:'', renewalDueDate:''};
vm.patents=[];
vm.select = function(item) {
vm.patentItem = patentsService.select(item); //THIS SHOULD POPULATE TABLE
console.log(vm.patentItem)
}
vm.fetchAllPatents = function(){
patentsService.fetchAllPatents()
.then(
function(d) {
vm.patents = d;
},
function(errResponse){
console.error('Error while fetching Users');
}
);
}
vm.fetchAllPatents();
}]);
工作台
<tbody>
<tr ng-repeat="x in patents.patents">
<td ng-click="patents.select(x)"><a ui-sref="patents.item({id: x.id})">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.currentRenewalCost">$</td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
table 坏了
<tbody>
<tr ng-repeat="x in item.patentItem">
<td>{{x.applicationNumber}}</td>
<td>{{x.clientRef}}</td>
<td>{{x.renewalStatus}}</td>
<td>{{x.costBandEndDate}}</td>
<td>{{x.renewalCostNextStage}}</td>
<td>{{x.renewalDueDate}}</td>
</tr>
</tbody>
最佳答案
然后您应该为 patents.item
状态创建一个新的单独 Controller 。在加载时,您只需从 patentsService
检索当前选定的项目。
//config
.state("patents.item", {
url: "/:id",
templateUrl: "templates/patents/list/patent-item.htm",
controller: "patentItem", //<-- controller added here
controllerAs: "item"
})
//patenItem new controller
.controller('patentItem', ['patentsService', function(patentsService) {
var item = this;
item.select = function(items) {
vm.patentItem = patentsService.select(item);
console.log(vm.patentItem)
};
function init(){
item.select();
}
init();
}]);
关于javascript - 用此关键字和controllerAs替换$scope时,ng-repeat出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44718234/