Question

我有一个表单，我在几个地方使用ng-repeat来输出来自不同数组的一些数据。还有一个“添加项目”按钮，可以将项目添加到数组中。像这样：

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

所以我想使用ng-disabled使保存按钮可见，只有当任何数组发生变化时。例如，默认情况下会禁用保存，但是当我向array1添加新项目然后呈现该项目时，我希望保存可见。此外，如果从阵列中删除新添加的元素，save应该知道恢复了默认状态并且应该禁用保存。

我不确定如何处理这个问题来创建可重用的东西，如果它是一个指令？是否有可用于实现此目的的解决方案？

Answer 1

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

$allFeeds[$cnt]['feed_status']         = br2nl($value['feed_status']);

使用How to compare arrays in JavaScript?的答案有效地比较两个数组。或者只是使用 scope.$watch('array1', function (newVal, oldVal) { if(!newVal.equals(oldVal)) { scope.enableShowButton = true; } },true)

Answer 2

您可以分两步完成：

首先，当你在数组中创建一个元素时，为你创建的元素添加一个标记（类似于“new：true”）。

在你的ng-disabled中调用一个方法来查看你的数组以找到“new：true”，在这种情况下返回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
);

使用指令监视更改

3 个答案: