1

我正在使用角度模式形式,我需要检测生成的元素何时被删除。

为了您的舒适,我做了一个 plunker: https ://plnkr.co/edit/ogaO8MBmNtxYBPHR67NC?p=info

控制器文件:

   //model form
    vm.modelForm = {"beneficiaries":[]};

    /*
    ================
    schema
    ================
    */
    vm.schema = {
      "type": "object",
      "title": "Beneficiario",
      "required": [
        "beneficiaries"
      ],
      "properties": {
        "beneficiaries": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "name": {
                "type": "number",
                "description": "Monto a transferir",
                "minimum": 1,
                "maximum": 500,
                "validationMessage": {
                   101: "El valor de este campo debe ser de al menos {{schema.minimum}} Bs",
                   103: "{{viewValue}} Bs es mayor que el máximo permitido para una transferencia: {{schema.maximum}} Bs",
                   302: "Este campo es requerido"
                }
              },
              "spam": {
                "title": "Spam",
                "type": "boolean",
                "default": true
              },
              "comment": {
                "type": "string",
                "maxLength": 20,
                "validationMessage": "Cantidad máxima de carácteres excedida"
              }
            },
            "required": [
              "name",
              "comment"
            ]
          }
        }
      }
    };

    /*
    ===============
    form
    ===============
    */
    vm.form = [
      {
        "type": "help",
        "helpvalue": "<h4>Transferencias y pagos</h4><h5>Lista de elementos seleccionados</h5>"
      },
      {
        "key": "beneficiaries",
        "title": "Selección",
        "autocomplete": "off",
        "add": null,
        "style": {
          "add": "btn-success"
        },
        "items": [
          {
            "key": "beneficiaries[].name",
            "title": "Monto Bs",
            "feedback": false
          },
          {
            "key": "beneficiaries[].spam",
            "type": "checkbox",
            "title": "Agregar a pagos frecuentes",
            "condition": "model.beneficiaries[arrayIndex].name"
          },
          {
            "key": "beneficiaries[].description",
            "title": "Descripción",
            "feedback": false
          }
        ],
        "startEmpty": true
      },
      {
        "type": "submit",
        "style": "btn-success btn-block",
        "title": "Agregar"
      }
    ];

    //form data
    vm.elements = [
      {
        "idE":1,
        "name": "Elemento 1",
        "selected": false
      },
      {
        "idE":2,
        "name": "Elemento 2",
        "selected": false
      },
      {
        "idE":3,
        "name": "Elemento 3",
        "selected": false
      },
      {
        "idE":4,
        "name": "Elemento 4",
        "selected": false
      }
    ];


    //function to select a element to put it inside of form
    vm.select = function(){
      //active elements
      var actives = _.filter(vm.elements, function(element) { 
        return element.selected == true; 

      });

      vm.modelForm.beneficiaries = new Array(actives.length);

      _.forEach(actives, function(value, key) {
        vm.modelForm.beneficiaries[key] = {"spam":true};
      });

    };

    //watch schema form
    $scope.$watch(function(){
      return vm.modelForm.beneficiaries;
    }, function(newValue, oldValue){
      if(newValue === oldValue) {
       return;
      }
      console.log("change");
    });

如果我更改表单的模型,我可以检测到元素何时被删除,但是如果我尝试使用任何生成的元素中的“x”删除该表单的元素,则无法检测模型是否已更改。

所以,看着 plunker,我试图用 $watch 来检测表单模型的变化,但是如果我删除一个在“X”上单击的元素,什么都不会发生,我需要检测何时完成此操作。

4

1 回答 1

1

引用很可能不会改变,因此您必须在 $watch 语句中使用第三个参数:

$scope.$watch(function () {
    return vm.modelForm.beneficiaries;
}, function (newValue, oldValue) {
    if (newValue === oldValue) {
        return;
    }
    console.log("change");
}, true);

,true告诉它对对象进行完全遍历以检查它是否已更改。看objectEquality这里:https ://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

于 2016-01-29T14:03:30.640 回答