0

问题空间

我有一个问题，我根据正在满足的标准提交表单，而不是有一个表单提交按钮。

假设我有 3 个下拉菜单，前两个已分组但需要选择一个，这意味着我可以选择一个或另一个但不能将它们留空，第三个是必填字段。

之后，页面会自动获取结果。

可以说我有复选框和更多的下拉菜单。提到的 3 个下拉列表、复选框和下拉列表中的任何未来选择都会自动过滤结果。

我知道的

现在，在阅读了 Angular 文档之后，我正在检查 $dirty、$pristine 和两者的操作，比如 $setDirty 和 $setPristine; 但是，这似乎是针对FormController

所以我假设这对整个范围都很有用。对于选定的范围，我没有看到任何可以弄清楚的倾向。

到目前为止我所拥有的

所以基本上，我希望我能利用示波器的跟踪功能，但我对此知之甚少。我为我的应用程序和一个范围创建了一个控制器，因为这对我来说似乎最简单。我有 3rd 方插件在范围内发挥作用，例如：

$scope.3rdpartyConfig = { prop1: [], prop2: getData() }

如果我要检查表单的 $dirty 状态，我认为这样的事情在检查表单提交时不会有用。

然后我想到了我以前做事的旧方式，但是“角度化”了它：

所以我会有类似的东西：

<input type="checkbox" ng-model="state.Checked" ng-change="checkIfWeCanSubmitThenSubmit()" id="ng-change-example1" />

所以我会在我的 html 表单上进行 ng-changes 和 ng-clicks，点击该函数，该函数看起来像这样的伪代码：

$scope.checkIfWeCanSubmitThenSubmit= function() {
    var validated = false;
    //check to see if dropdown1 or dropdown2 are selected
    //check to see if dropdown3 is selected
    // add more here per requirement

    //if the above are true, then validated = true

    if (validated)
    {
         //add dropdown4 and 5, and checkbox groups into filter
    }

    submit();
}

但我在想这不是有角度的做事方式，因为这肯定没有便利。

我希望范围能提供某种方式，在提交和获取数据之前，我可以检查范围的哪些部分是脏的，或者是否有比将这个函数附加到每个 html 更好的方法元素; 就像拥有某种范围跟踪器，我可以检查和观看。

这提醒了我，我也不想拥有一系列 $scope.$watch ，只是绑定到每段 html 代码的工作量太大了，除非有办法观察 a 的范围那么，我不介意收集特定的范围变量。

喜欢（原谅伪代码）：

$scope.$watch('dropdown1, dropdown2, dropdown4', function(dirty, pristine)
{
    if (dirty)
    { blah blah blah }
});

编辑（2013 年 2 月 28 日）：

我试过这样做：

$scope.masterCriteria =
[
    { DropDown1: $scope.AppModel.Dropdown1},
    { DropDown2: $scope.AppModel.Dropdown2 },
    { DropDown3: $scope.AppModel.Dropdown3 },
    { Checkbox1: $scope.AppModel.Checkbox1 },
    { Checkbox2: $scope.AppModel.Checkbox2 }
];

$scope.$watch('masterCriteria', function (newVal) {
    if (newVal) { logger.info("did I change?"); }
}, true);

观察者没有检测到任何东西，并且我更改为 AppModel 范围的任何值都没有在 $watch 中被拾取。值得一试，仍在努力解决这个问题。

4

1 回答 1

0

您可以一起稍微更改与输入表单相关的模型和组字段。将它们放入单个对象中。像这样：

 $scope.state = { checkbox1: false, checkbox2: true, ... }

稍后将输入框绑定到state对象字段：

 <input ng-model="state.checkbox1" ... >

并监视state对象以捕获嵌套字段的所有更新：

 $scope.$watch('state', ...

JsFiddle 示例在这里

于 2014-02-28T00:53:18.963 回答