使用指令监视更改

Question

我有一个表格，我在几个地方使用 ng-repeat 从不同的数组输出一些数据。还有一个 'Add item' 按钮应该向数组添加一个项目。像这样：

-----------FORM--------------
|      [add button]         |
|                           |
|   ------------------      |
|   | ng-repeat array1|     |
|   -------------------     |
|       [add button]        |
|   ------------------      |
|   | ng-repeat array2|     |
|   -------------------     |
|                 [save]    |
-----------------------------

所以我想使用 ng-disabled 使保存按钮可见，仅当任何数组发生变化时。例如，默认情况下保存将被禁用，但是当我将新项目添加到 array1 然后该项目被渲染时，我希望保存可见。此外，如果新添加的元素从数组中删除，保存应该知道默认状态已恢复并且应该禁用保存。

我不确定如何解决这个问题来创建可重用的东西，它应该是一个指令吗？有没有我可以用来实现这个的解决方案？

Answer 1

首先，如果单击了某些[添加按钮]，您可以只启用[保存]按钮。其次，您可以使用代码来观察 array1 和 array2 的变化：

scope.$watch('array1',
function (newVal, oldVal) {
 if(!newVal.equals(oldVal)) {
   scope.enableShowButton = true;
 }
},true)

使用 How to compare arrays in JavaScript? 的答案有效地比较两个数组。或者只是使用 angular.equals

Answer 2

您可以分两步完成：

首先，当您在数组中创建一个元素时，向您创建的元素添加一个标签（类似于 "new: true"）。

并且在你的 ng-disabled 中调用一个方法来查看你的数组以找到 "new: true"，在这种情况下 return false.

Answer 3

试试这个

$scope.oldModel = { text:'val',text2:'val2'}
$scope.model = { text:'val',text2:'val2'}

$scope.btnDisabled= true;

观察范围

$scope.$watch('model.text + model.text2',
  function(newVal, oldVal) {
    if(JSON.stringify($scope.oldModel) !== JSON.stringify($scope.model)){
        $scope.btnDisabled= false;
    }
    else{
        $scope.btnDisabled= true;
    }
  }
);

或

$scope.$watch('model',
  function(newVal, oldVal) {
    if(JSON.stringify($scope.oldModel) !== JSON.stringify(newVal)){
        $scope.btnDisabled= false;
    }
    else{
        $scope.btnDisabled= true;
    }
  },
  true
);

使用指令监视更改

Monitor changes with a directive

javascript

angularjs

angular-directive