使用引导模态和AngularJS进行编辑 [英] Edit with bootstrap modal and AngularJS

问题描述

我已将引导程序模式设置为用于编辑数据表中的特定数据. 我能够打开弹出窗口，也能够获取数据，但是当我在模式的文本框中进行一些更改时，它也会突然反映到数据表中(数据表在另一个控制器中).

I have made bootstrap modal for edit particular data from my data-table. I am able to open popup and able to fetch my data as well, but as i am doing some changes in modal's text box it is suddenly reflect to data-table also (data-table is in another controller).

仅当我单击更新按钮时，我才希望将其反映在数据表中. 而且，如果我点击取消按钮，则先前的值应该在那里.

I want to reflect it in data-table only if I am clicking Update button. And if I click cancel button then the previous value should be there.

这是我的HTML代码:

Here is my HTML code:

<tr ng-repeat="Filterlist in macAddressListResult" class="text-center">
    <td>{{1+$index}}</td>
    <td class="padding-top-8">
         <span class="label" >{{Filterlist.status}}</span>
    </td>
    <td><span>{{Filterlist.macAddress}}</span></td>
    <td>
        <button ng-click="openModal(Filterlist)" class="btn btn-xs btn-primary" title="Edit">
             <i class="glyphicon glyphicon-edit"></i>
        </button>
        <button  class="btn btn-xs btn-danger" title="Delete">
             <i class="glyphicon glyphicon-trash"></i>
        </button>
    </td>
</tr>

以下是模态HTML代码:

Here is Modal HTML code:

<div class="modal-header bg-color">
    <h3 class="modal-title">Edit</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-2">
            MacAddress
        </div> 

        <div class="col-md-10">:
            <input type="text" ng-model="mac.macAddress" name="macAddress" >
        </div>      
    </div>
    <br>
    <div class="row">
        <div class="col-md-2">
            status 
        </div> 

        <div class="col-md-10">:
            <select type="text" ng-model="mac.status" name="macAddress" >
                <option ng-repeat="p in denyAllow">{{p}}</option>
            </select>
        </div>      
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-success" ng-click="ok(mac)"> Save </button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>

这是angularJS代码:

Here is angularJS code:

app.controller('networkModeCtrl', function($rootScope, $scope, $state, networkModeService,  $modal, $timeout){
    $scope.openModal    = function(mac){
        var modalInstance = $modal.open({
            templateUrl: 'partials/settings/macAddressEdit.html',
            controller:  'macAddressEditCtrl',
            controllerAs: 'vm',
            scope: $scope,
            resolve: {
                mac: function () { return mac}
            }
        });
    }
});

app.controller('macAddressEditCtrl', function($scope, $state, $stateParams, $modalInstance, mac, networkModeService, indexService){
    $scope.mac  = mac; 

    // === Get Mac address filter  mode (allow/Deny) list === //
    networkModeService.denyAllow().success(function(result){
        $scope.denyAllow    = result; 
    });

    // === function to  save mac staus  ===//
    $scope.ok    = function(mac) {
        $modalInstance.close();  
    };  

    // === function to cancel  model  === //
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

所以，请任何人知道我要去哪里了！！！ 预先感谢.

So, please anyone know me where I am going wrong!!! Thanks in advance.

推荐答案

之所以发生这种情况，是因为双向数据绑定是AngularJS的核心功能.

This is happening because of two-way data binding, which is the core feature of AngularJS.

在scope设置为$scope的情况下将Filterlist对象传递给模态时，实际上是在使模态直接与数据表中的数据通信，并进行实时更新.

When you pass the Filterlist object to the modal with scope set to $scope, you are effectively letting the modal communicate with the data in datatable directly, and updating it in real time.

要满足您的要求，您应该复制 Filterlist像这样的对象在您的控制器中:

To achieve your requirement, you should copy the Filterlist object like this in your controller:

$scope.updateFilterlist = angular.copy($scope.Filterlist);

并将其传递给模式:

<button ng-click="openModal(updateFilterlist)" class="btn btn-xs btn-primary" title="Edit">
  <i class="glyphicon glyphicon-edit"></i>
</button>

或者直接在视图代码中完成:

Or do it directly in the view code:

<button ng-click="openModal(angular.copy(Filterlist))" class="btn btn-xs btn-primary" title="Edit">
  <i class="glyphicon glyphicon-edit"></i>
</button>

这将在内存中创建对象的两个不同实例，以便对模式中的一个实例所做的更改不会反映到数据表中的另一个实例上.

This will create two different instances of the object in memory so that changes to one in the modal do not reflect on the other in the datatable.

然后，您可以添加代码，以在单击更新"按钮时将对updatedFilterlist所做的更改复制到Filterlist.

You can then add code to copy the changes made to updatedFilterlist to Filterlist when 'Update' button is clicked.

这篇关于使用引导模态和AngularJS进行编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！