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

Question

I'm working on my first app in angularjs, and I have a problem with the app refreshing all rows from the database whenever I click on a button, even though I haven't asked it to. Each row from the data source has a 'block' button. If I click that button, that row in the model is marked as blocked correctly and restyled, but then all the rows are refreshed from the data source, overwriting the change on the client side. Why is this occurring?

Full code:

<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

This happens because on button click you rewrite your $scope.appointments, and 'blocked' property does not save. For solve this, you can store 'blocked' property locally in other array and on calling $scope.getAppointments write this property to every 'appointments' object. Another way, refresh only appoitments, that has change on server - and your 'blocked' property will saved.