Angularjs 单击后再次隐藏提交按钮（ng显示-表单验证）_Angularjs

Angularjs 单击后再次隐藏提交按钮（ng显示-表单验证）

angularjs

Angularjs 单击后再次隐藏提交按钮（ng显示-表单验证）,angularjs,Angularjs,我有下面的代码，如果两个输入都有值并且inputURL是有效的URL，则显示a.btn锚。工作正常，但我想在单击时再次隐藏按钮，我该如何做，我是重置表单还是实际在单击时隐藏按钮 <form name="myForm" class="row inputs"> <div class="col-xs-5"> <label for="exampleInputPassword1">Enter a Title/Description&l

我有下面的代码，如果两个输入都有值并且inputURL是有效的URL，则显示a.btn锚。工作正常，但我想在单击时再次隐藏按钮，我该如何做，我是重置表单还是实际在单击时隐藏按钮

  <form name="myForm" class="row inputs">
      <div class="col-xs-5">
          <label for="exampleInputPassword1">Enter a Title/Description</label>
            <input name="inputName" type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" required>
        </div>
        <div class="col-xs-5">
            <label for="exampleInputPassword1">Enter a URL</label>
            <input type="url" name="inputURL" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" required>
      </div>
      <div class="col-xs-2">
          <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.$valid">Post</a>
      </div>

    </form>


输入标题/说明
输入一个URL

我之前所做的是在控制器中创建一个范围变量：

$scope.formSubmitted = false;

然后在saveToList函数中将$scope.formSubmitted设置为true。从这里你有几个选择。如果“Post”按钮是实际按钮，则可以设置禁用属性。您还可以在saveToList函数中检查formSubmitted是否为true，如果为true，则不继续。或者，您可以将ng show更改为：

ng-show="myForm.$valid && !formSubmitted"

您可以这样做：

定义另一个

$scope.someToggle

变量，并将其赋值为

true

，然后在按钮的

ng show

处添加它，如

ng show=“myForm.$valid&&someToggle”

。然后在

saveToList（$event）

函数的末尾（或在回调中），将

$scope.someToggle

设置为

false

您还可以在两个输入上都设置此选项：

ng change=“someToggle=true”

，这样每当它们更改时（在单击“保存”按钮后），您就可以将其带回…

HTML

    <body ng-app="myApp">
<div ng-controller="formCtrl">
<form name="myForm" class row inputs">
      <div class="col-xs-5">
          <label for="exampleInputPassword1">Enter a Title/Description</label>
            <input name="inputName" type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" required>
        </div>
        <div class="col-xs-5">
            <label for="exampleInputPassword1">Enter a URL</label>
            <input type="url" name="inputURL" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" required>
      </div>
      <div class="col-xs-2">
          <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.$valid">Post</a>
      </div>

    </form>
    </div>
</body>

备选方案

带有范围变量，但不使表单无效

 <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.$valid {{logicalExp}} !formSubmitted">Post</a>

app.controller('formCtrl', function($scope) {   

    $scope.logicalExp = "||";
    $scope.formSubmitted = true;

    $scope.saveToList = function() {            
        $scope.logicalExp = "&&";
          $scope.formSubmitted = true;              
    }
  });


app.controller（'formCtrl'，函数（$scope）{
$scope.logicalExp=“| |””；
$scope.formSubmitted=true；
$scope.saveToList=函数（）{
$scope.logicalExp=“&&”；
$scope.formSubmitted=true；
}
});

问题是，用户需要通过删除输入的值使表单无效，然后超链接将被隐藏。

$scope.formSubmitted=false@PetrAveryanov-你说得对，说得好。我添加它是因为我觉得它有助于解释发生了什么。好吧，这不起作用，我添加了ng show=“myForm.$valid&&！formSubmitted”和$scope.formSubmitted=true；在savetolist函数中，但现在不会消失@Jeremythe

ng show

的表达式不会出现，除非您更改其

模型的值。因此，除非您以某种方式更改输入的值（例如在函数中清空它们或诸如此类），否则这种情况不会发生。你确定ng show
写得正确吗？在函数中，我清空它们urlName.value=''//urlName是urlLink.value=''的ID//urlName是输入框的ID-棱角石我在这一次的什么地方再次将其设置为false=@Pratap A.kw何时要将其设置为false？如果设置为true，则始终为true。此解决方案的一个警告是，您只是使表单无效。因此，如果表单提交有错误，或者出于某种原因，您需要让用户返回并修改其条目，那么您已经将其全部删除，因此他们必须重新输入所有条目。我更喜欢使用范围变量来禁用按钮。问题要求相同。。为了再次隐藏超链接，我们必须使表单无效$范围不符合此要求。
 <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.$valid {{logicalExp}} !formSubmitted">Post</a>

app.controller('formCtrl', function($scope) {   

    $scope.logicalExp = "||";
    $scope.formSubmitted = true;

    $scope.saveToList = function() {            
        $scope.logicalExp = "&&";
          $scope.formSubmitted = true;              
    }
  });