我想我知道为什么列表没有改变所以这个问题可能更多“我怎样才能以双向绑定的方式做到这一点？”
我有这个观点：
<div class="table-responsive">
<table class="table table-striped table-light">
<thead>
<tr class="uppercase">
<th></th>
<th>
<a href="" ng-click="controller.predicate = 'name'; controller.reverse = !controller.reverse">
Name
<span ng-show="controller.predicate == 'name' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'name' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'description'; controller.reverse = !controller.reverse">
Description
<span ng-show="controller.predicate == 'description' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'description' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'address1'; controller.reverse = !controller.reverse">
Address 1
<span ng-show="controller.predicate == 'address1' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'address1' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'address2'; controller.reverse = !controller.reverse">
Address 2
<span ng-show="controller.predicate == 'address2' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'address2' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'address3'; controller.reverse = !controller.reverse">
Address 3
<span ng-show="controller.predicate == 'address3' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'address3' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'address4'; controller.reverse = !controller.reverse">
Address 4
<span ng-show="controller.predicate == 'address4' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'address4' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="controller.predicate = 'postCode'; controller.reverse = !controller.reverse">
Post code
<span ng-show="controller.predicate == 'postCode' && !controller.reverse" class="fa fa-caret-down"></span>
<span ng-show="controller.predicate == 'postCode' && controller.reverse" class="fa fa-caret-up"></span>
</a>
</th>
<th class="actions">
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="center in controller.centers.data | orderBy: controller.predicate:controller.reverse | filter: controller.filter | itemsPerPage : controller.pageSize" ng-click="controller.select($index)">
<td>
<label>
<input type="checkbox" ng-checked="controller.isSelected($index)" />
</label>
</td>
<td>
{{ center.name }}
</td>
<td>
{{ center.description }}
</td>
<td>
{{ center.address1 }}
</td>
<td>
{{ center.address2 }}
</td>
<td>
{{ center.address3 }}
</td>
<td>
{{ center.address4 }}
</td>
<td>
{{ center.postCode }}
</td>
<td class="actions">
<button class="btn btn-success" ng-click="controller.add($event, $index)" ng-if="!controller.contains(controller.userCenters, center)">
<span class="fa fa-check"></span>
</button>
<button class="btn btn-danger" ng-click="controller.remove($event, $index)" ng-if="controller.contains(controller.userCenters, center)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<dir-pagination-controls></dir-pagination-controls>
（为简洁而截断）
现在，您可以看到根据功能显示操作按钮。此功能检查中心并查看它们是否是用户中心的一部分。如果是，则显示删除按钮，如果不是，则显示添加按钮。 控制器看起来像这样：
.controller('UserCentersController', ['$stateParams', 'ArrayService', 'CenterService', 'toastr', 'centers', 'userCenters', function ($stateParams, arrayService, service, toastr, centers, userCenters) {
var self = this;
// Get our user Id
var userId = $stateParams.userId;
// Assign our centers
self.centers = centers;
self.userCenters = userCenters;
self.selected = [];
// Create our page sizes array
self.pageSizes = [10, 20, 50, 100];
// For filtering and sorting the table
self.pageSize = self.pageSizes[0];
self.predicate = 'name';
self.reverse = false;
self.filter = '';
console.log(centers);
// Select method
self.select = function (index) {
// Get our index
var i = self.selected.indexOf(index);
// If our index is in our array
if (i > -1) {
// Remove from our array
self.selected.splice(i, 1);
// Else, our index is not in our array
} else {
// Add our index to our array
self.selected.push(index);
}
};
// Check to see if the row is selected
self.isSelected = function (index) {
// If our item is in our array, return true
return (self.selected.indexOf(index) > -1);
};
// Function to check if a center is in an array
self.contains = function (array, center) {
// Check to see if our center is in the array
return arrayService.indexOf(center) > -1 ? true : false;
};
// Adds the current center to the users list
self.add = function (e, index) {
// Stop propagation
e.stopPropagation();
console.log(index);
// If we have an index
if (typeof index !== 'undefined') {
// Get our center
var center = self.centers.data[index];
console.log(center);
// Make our call
//var save = service.addToUser(center, userId);
// Push to our user centers if it's not already there
arrayService.modify(self.userCenters.data, center);
console.log(self.userCenters.data);
}
};
}]);
现在，按下添加后，中心将添加到用户中心（通过将当前中心推送到userCenters数组）。我希望在完成后，视图会更新，添加按钮将被替换为删除按钮，但事实并非如此。
我认为这是因为 self.centers.data 数组未更改，因此视图保持不变。有人可以提出解决方案吗？
答案 0 :(得分：0)
你需要在self.centers.data上使用$ scope。$ watch，如下所示：
$scope.$watch('self.userCenters.data',function(newValue,oldValue){
if(!newValue)return;
if(newValue==oldValue)return;
if(!$scope.$$phase){
$scope.$apply();
}
});
答案 1 :(得分：0)
你有两种方法可以做你想做的事。
1）您的中心列表由服务控制，控制器中的变量只是服务上数组的引用。您对该服务的调用可能只是arrayService.modify(center);，因为该服务已经知道该数组。
2）您有两个单独的中心列表，一个在服务中，另一个在控制器中。当您更新服务中的那个时，您需要更新控制器中的那个：
arrayService.modify(self.userCenters.data, center);
self.userCenters.data = angular.copy(arrayService.getCenters());
由于我不知道您是如何对服务进行编码的，因此我不知道哪种情况更适合您，但我更喜欢选项1.