Question

问题空间

我遇到的问题是，我根据符合条件提交表单，而不是提交表单提交按钮。

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

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

假设我有复选框和更多下拉菜单。所提及的3个下拉列表中的任何未来选项，复选框和下拉列表都会自动过滤结果。

我所知道的

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

所以我认为这对整个范围都很有用。我没有看到任何我可以理解选定范围的倾向。

到目前为止我有什么

基本上，我希望我能够使用示波器的跟踪功能，但我对此并不了解。我为我的应用程序和单个示波器创建了一个控制器，因为这对我来说似乎最简单。我有第三方插件在范围内起作用，如：

$ 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代码都是太多的工作，除非有办法观看特定范围变量集合的范围，那么，我不介意。

喜欢（原谅伪代码）：

$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中被选中。值得一试，仍然试图解决这个问题。

Answer 1

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

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

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

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

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

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

JsFiddle example here

angularjs - 基于脏范围的流线形式（自动）提交

1 个答案: