AngularJS | ng-model-options指令 - 芒果文档

📌 相关文章

📜 AngularJS | ng-model-options指令

📅 最后修改于: 2021-05-13 18:28:41 🧑 作者: Mango

ng-model-options指令具有帮助用户在当前应用程序中修改ngModel指令的行为的功能。基本上，它在用户必须控制范围内的变量和HTML表单元素的绑定时使用。
您还可以指定绑定发生的等待时间。可以将其编程为花费一些时间，也可以几乎立即完成(如下面的示例所示)。

句法：

该语法受以下支持：

<输入>
<选择>
</li> </ul> <p><strong>范围：</strong></p> <ul><strong>选项：</strong>指定选项的对象之后必须是数据绑定。 <li> {updateOn：’event’}指定在发生特定事件时应进行绑定。</li> <li> {debounce：1000}指定绑定的等待时间(以毫秒为单位)。</li> <li> {allowInvalid：true | false}指定如果值未验证，绑定是否可以发生。</li> <li> {getterSetter：true | false}指定是否应将绑定到模型的函数视为getter / setter。</li> <li> {timezone：’0100′}指定在使用Date对象时应使用哪个时区。</li> </ul> <p><strong>示例：</strong>此示例将说明如何通过ng-model-options指令来保持输入字段的值的数据绑定，直到丢失该字段的焦点为止。<br/>您还将注意到输入值时，该值将立即更新。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Python"><code class="replace"><!DOCTYPE html> <html> <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body style="text-align:center"> <h2 style="color:green"> GeeksForGeeks </h2> <h2 style="color:purple"> Using ng-model-options directive </h2> <div ng-app="myApp" ng-controller="myCtrl"> <p>Please enter something below:</p> <input ng-model="name" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" style="text-align:center"> <p>The binding is going to wait for the value until the focus of the field is lost:</p>{{name}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Shah Rukh Khan"; }); </script> </body> </html> </code></pre> </div> <p><strong>输出：</strong> <br/><img alt="ngcut" class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/geeksforgeeks2021/AngularJS%20%7C%20ng-model-options%20Directive_0.jpg"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7"></div> <p></p></div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>