Question

我已经制作了bootstrap模式来编辑我的数据表中的特定数据。我能够打开弹出窗口并且能够获取我的数据，但是当我在模态文本框中进行一些更改时，它突然反映到数据表（数据表在另一个控制器中）。

仅当我点击更新按钮时，我才想在数据表中反映出来。如果我点击取消按钮，那么之前的值就应该在那里。

这是我的HTML代码：

<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代码：

<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代码：

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');
    };
});

所以，请有人知道我哪里出错!!! 提前谢谢。

Answer 1

这是因为双向数据绑定，这是AngularJS的核心功能。

当您将Filterlist对象传递给scope设置为$scope的模态时，您实际上是让模态直接与数据表中的数据进行通信，并实时更新它

要达到您的要求，您应该在控制器中copy Filterlist这样的对象：

$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>

或直接在视图代码中执行：

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

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

然后，您可以添加代码，以便在点击“更新”按钮时将对updatedFilterlist所做的更改复制到Filterlist。

使用bootstrap模式和AngularJS进行编辑

1 个答案: