Question

我有一个从数据库中获取联系人数据的角度服务，然后我使用这些数据，以便用户可以在交易中添加一个或多个联系人，因此交易和联系人之间存在多对多关系，选定的数据显示在网格中（同步网格）。

我需要有一个从数据库中检索到的数据的常量列表，以及包含我传递给syncfusion网格的所选联系人的变量，当用户从下拉列表添加时我将此联系人添加到网格并从中删除下拉列表，如果我从网格中删除它，我将它返回到下拉列表，所以这是我的代码：此服务获取联系人列表：

var contactsListDB = [];
contactService.getAll().then(function (contacts) {
    contactsListDB = contacts.data;
    $scope.contactsList = contactsListDB; // the scope used in the select input in the HTML
});

添加联系人的方法：

$scope.addContact = function (contact) {
    var contactJson = JSON.parse(contact);
    $scope.dealContacts.push(contactJson);

    var index = $scope.contactsList.findIndex(x => x.id == contactJson.id);
    SyncFusionDealContact($scope.dealContacts);
    $scope.contactsList.splice(index, 1);
}

在HTML中调用此函数：

<ng-form name="ContactForm">
    <md-input-container>
        <label>{{"Contact" | translate}}</label>
        <md-select ng-model="contact">
            <md-option value="{{null}}">-- {{"selectContact" | translate}} --</md-option>
            <md-option ng-repeat="contact in contactsList" value="{{contact}}">{{contact.name}}</md-option>
        </md-select>
    </md-input-container>

    <md-input-container>
        <div>
            <button class="btn btn-primary" type="submit" ng-disabled="!ContactForm.$valid" ng-click="addContact(contact)" aria-label="submit">{{'add' | translate}}</button>
        </div>
    </md-input-container>
    <div id="GridDealContacts">
        <script id="columnTemplateContacts" type="text/x-jsrender">
            <a class="btn btn-danger btn-xs contactDelete" data-id="{{:id}}" ng-click="DeleteContact{{:id}}"><i class="fa fa-trash-o "></i></a>
            <!--add delete button-->
        </script>
    </div>
</ng-form>

加载页面时，我会检查对象是否正在编辑，然后从联系人表格中列出的列表中排除现有联系人：

    $scope.dealContacts = deal.contacts;

    SyncFusionDealContact($scope.dealContacts);
    execludeContacts()

execludeContacts功能：

function execludeContacts() {
        var exIds = [];
        if ($scope.dealContacts.length > 0) {
            exIds = $scope.dealContacts.map(x=> x.id)
        }
        var conts = contactsListDB;
        conts.forEach(function (item, index) {
            if (exIds.includes(item.id)) {
                conts.splice(index, 1);
            }
        })


        $scope.contactsList = conts;
    }

此函数处理删除操作：

$scope.DeleteContact = function (id, index) {
    if (id <= 0) {
        $scope.dealContacts.splice(index, 1)
        SyncFusionDealContact($scope.dealContacts);
    }
    else {
        if (confirm("Are You Sure?")) {

            dealService.deleteContact(id, $routeParams.id).then(function (success) {
                if (success.data.isSuccess) {
                    SyncFusionDealContact($scope.dealContacts);
                    var one = contactsListDB.filter(x => x.id == id)[0];
                    $scope.contactsList.push(one);
                    $scope.dealContacts.splice(index, 1);

                }
                else {
                    alert('Cannot delete');
                }
                SyncFusionDealContact($scope.dealContacts);

            });
        }
    }
}

在上面的代码中，我尝试将联系人列表的副本保存在一个无法更改的变量contactsListDB中，这样当从网格中删除记录时，我可以从该数组中取回它再次将它添加到下拉列表中，但会发生的变化是数组已更改：

截图：

Answer 1

我不确定你在问什么，但我想你想在某个地方'保存'数据？如果是这种情况，请查看使用工厂或服务。我更喜欢使用工厂，因为它很简单。

在我与Angular合作的短暂时期内，我知道工厂将永远保持活力（即使在SPA中切换视图），直到您刷新页面。

在一个简单的例子中，工厂将保存一个联系人列表，并具有多个函数，如addContact和deleteContact。这样可以减少代码的混乱，只需在代码中调用工厂及其函数即可。

我目前无法给出一个具体的例子（因为我更喜欢使用我自己的工厂及其用法），但是here你可以找到工厂和服务之间的比较以及如何使用它们。

如果我误解了你的问题，请告诉我。：d

如何保持角度的恒定范围？

1 个答案: