当我单击按钮时，为什么我的角度应用程序会刷新数据源中的所有行？

Question

我正在使用angularjs开发我的第一个应用程序，但是即使我没有要求，该应用程序也会在每次单击按钮时刷新数据库中的所有行，但存在问题。 数据源中的每一行都有一个“阻止”按钮。 如果单击该按钮，则模型中的该行被标记为正确阻止并重新设置了样式，但是随后所有行都从数据源刷新，从而覆盖了客户端的更改。 为什么会这样呢？

完整代码：

<script>

var bookingAppModule = angular.module('bookingApp',[]);

bookingAppModule.controller('bookingController', ['$scope', '$http', function ($scope, $http) {
    $scope.bookingDate = '<%= DateTime.Today.Year %>/<%= DateTime.Today.Month %>/<%= DateTime.Today.Day %>';

    $scope.getAppointments = function () {
        var response = $http.post('/api/Appointments', "'" + $scope.bookingDate + "'" );
        response.success(function (data, status, headers, config) {
            $scope.appointments = data;
        });
        response.error(function (data, status, headers, config) {
            alert('Something went wrong...');
        });
    };

    $scope.appointments = $scope.getAppointments();

    $scope.blockSlot = function (slot) {
        slot.blocked = true;
    };

    $scope.bookSlot = function (slot) {
        alert("booking slot " + slotId);
    }
}]);


</script>
<div id ="booking-app" ng-app="bookingApp">
<div id="service-select">
<label for='<%= ddlService.ClientID %>'>Select service:</label>
<asp:DropDownList ID="ddlService" runat="server" DataTextField="Description" DataValueField="Id" OnSelectedIndexChanged ="ddlService_SelectedIndexChanged" AutoPostBack="false" >
</asp:DropDownList>
</div>
<div ng-controller="bookingController">
    <input type="date" ng-model="bookingDate" ng-change="getAppointments()" />
    <div class ="appt-day">
    <div ng-repeat="shift in appointments">
    <div class="appt-counsellor">
        <h2>{{shift.counsellor}}</h2>
    </div>
    <div ng-repeat ="slot in shift.slots" class="appt-row clearfix" ng-class="{'blocked' : slot.blocked}" >
        <div class="appt-time">{{slot.time}}</div>
        <div class="appt-desc">{{slot.clientName}}</div>
        <button class="appt-btn mla-button" ng-class="{'show' : !slot.blocked}" ng-click="bookSlot(slot)">Book</button>
        <button class="appt-btn mla-button" ng-class="{'show' : !slot.blocked}" ng-click ="blockSlot(slot)">Block</button>
    </div>
    </div>
</div>
</div>

Answer 1

发生这种情况是因为在单击按钮时您重写了$ scope.appointments，并且'blocked'属性没有保存。 为了解决这个问题，您可以在其他数组中本地存储“ blocked”属性，并在调用$ scope.getAppointments时将此属性写入每个“ appointments”对象。 另一种方法是，仅刷新服务器上已更改的appoappments-并且将保存“ blocked”属性。