Question

我遇到麻烦在角度开关内验证2个textareas ...例如：

<html ng-app="CholoApp">
<head>
    <script src="angular.min.1.3.9.js" type="text/javascript"></script>
    <script type="text/javascript">
    var modulo = angular.module("CholoApp",[]);
    modulo.controller("CholoAppController",function($scope){
        $scope.index = 0;
        $scope.ver = function()
        {
            alert("Ver");
        }
    });
    </script>
</head>
<body ng-controller="CholoAppController">
    <div ng-switch on="index">
            <div  ng-switch-when="0">
                        <form name="formularioObservaciones" novalidate>
                                <textarea
                                    id="observaciones"
                                    ng-model="observacionesModel"

                                    ng-maxlength="10">
                                </textarea>

                        </form>
            </div>
    </div>
    <button type="button" ng-click="ver();" ng-disabled="!(formularioObservaciones.$valid)">Ver</button>
</body>

例如，此代码应启用按钮...但它已被禁用！问题是，这发生在交换机内部...为什么这是hapenning？当我切换到另一个案例时，模型也被重置......

希望有一个解决方案......

Answer 1

您必须使用ng-show指令。这种情况发生在ng-switch和ng-if指令的工作方式中，它会动态生成内容，而formularioObservaciones形式无法访问。 ng-show只是改变了html属性。

以下是使用ng-show解决此问题的示例：

<body ng-controller="CholoAppController">
    <div  ng-show="index == 0">
                <form name="formularioObservaciones" novalidate>
                        <textarea
                            id="observaciones"
                            ng-model="observacionesModel"

                            ng-maxlength="10">
                        </textarea>
                </form>
    </div>
    <button type="button" ng-click="ver();" ng-disabled="!(formularioObservaciones.$valid)">Ver</button>
</body>

如果您仍想使用ng-switch，可以这样做：

<body ng-controller="CholoAppController">
    <div ng-switch on="index">
        <div ng-show="index == 0">
                    <form name="formularioObservaciones" novalidate>
                            <textarea
                                id="observaciones"
                                ng-model="observacionesModel"

                                ng-maxlength="10">
                            </textarea>
                    </form>
                    <button type="button" ng-click="ver();" ng-disabled="!(formularioObservaciones.$valid)">Ver</button>
        </div>
    </div>
</body>

交换机内的Angular TextArea验证

1 个答案: