Question

我曾经广泛使用过Jquery。现在我偶然发现了Angularjs，我正在尝试理解它是如何工作的，我对它的工作原理感到非常兴奋。例如，我可以使用ng-click，ng-hide＆amp; amp;来执行以下隐藏和显示几个块的过程。 ng-show。

<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
    <input type="text" name="user" ng-model="name">
    <button type="submit"  id="submit" ng-click="showConfirm = ! showConfirm">Submit</button>
</form>

<div class="col-md-12 confirmation" ng-show="showConfirm">
        <h2 >Thanks alot for your feedback.</h1>
</div>

但是，我仍然想知道如何从代码中执行相同操作，比如来自控制器。在Jquery中，一种方法是：

$( "#submit" ).click(function() {
   $(".confirmation").show();
   $("#signup-form").hide(); 
});

也许如果我想验证表单，我可以在Jquery中使用.preventDefault();并做一些事情。这些在AngularJs中是如何工作的？

Answer 1

只需更改控制器中的模型值：showConfirm = !showConfirm;

这将使用您已有的ng-hide和ng-show指令自动更新您的视图。

更好的是，调用范围函数，如：

$scope.toggleConfirm = function() { showConfirm = !showConfirm; }

...并使用ng-click="toggleConfirm()"在您的视图中调用该代码以保留您的代码DRY。

如何在js代码中显示/隐藏点击事件中的元素？

1 个答案: