angular-bootstrap 手风琴数据绑定问题 [英] angular-bootstrap accordion databinding issue

查看：20 发布时间：2021/11/10 3:52:43 javascript angularjs angular-ui

本文介绍了angular-bootstrap 手风琴数据绑定问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 2 个相同型号的下拉菜单，一个在手风琴里面，另一个在外面.外部下拉菜单在 2 路数据绑定方面工作正常，但手风琴内部的下拉菜单似乎只有 1 路绑定，换句话说，在 UI 中选择不是设置模型值.我发现了一个建议这里使用 ng-change 将解决这个问题.它针对 </code> 修复，但不适用于 <code><select></code>.想知道这可能是 <a href="http://angular-ui.github.io/bootstrap/#/datepicker" rel="nofollow noreferrer">angular-ui</a> 中的错误.有人可以帮助解决这个问题.提前致谢！</p><p><strong>室外手风琴</strong></p><pre><code> </p><div class="form-group"><label class="col-md-2 control-label" for="category">Category</label><div class="col-md-3"><select id="category" ng-model="category" name="category" type="text" class="form-control"><option ng-repeat="config.categories.sort() 中的category" value="{{category}}">{{category}}</option></选择></div><p></div><p></code></pre><p><strong>内部手风琴</strong></p><pre><code><accordion close-others="false"><手风琴组><div class="form-group"><label class="col-md-2 control-label" for="category">Category</label><div class="col-md-3"><select id="category" ng-model="category" ng-change="setCategory(category)" name="category" type="text" class="form-control"><option ng-repeat="config.categories.sort() 中的category" value="{{category}}">{{category}}</option></选择></div><p></div><p></accordion-group></手风琴></code></pre><p>我的模型 <code>categories</code> 是一个字符串数组:</p><p>示例:</p><pre><code>类别":["管理 API","管理员许可证","adminGUI","天线房","应用程序生成器","备份/恢复",基础"]</code></pre><p><strong>ng-change 函数</strong></p><pre><code> $scope.setCategory = function(category) {$scope.category = 类别；};</code></pre><p></p><div class="h2_lin"> 解决方案 </div><p>直接绑定到作用域的一个属性几乎是一个坏主意，因为很多指令定义了自己的作用域，如果你的小部件(选择框)在里面这样的指令，您实际上将绑定到子范围的属性，而不是绑定到控制器范围的属性.</p><p>因此经验法则是:在你的 ng-model 中总是有一个点.表单控件应该修改您作用域的对象，而不是直接修改您的作用域.</p><p>在您的控制器中:</p><pre><code>$scope.selection = {};</code></pre><p>在您看来:</p><pre><code><select ng-model="selection.category" ...></code></pre><p>另外，请注意您使用相同的 ID 来标识两个选择框.这将使您的 DOM 无效.ID 唯一标识一个元素.</p><p>I have 2 drop downs with same models, one inside accordion and another outside. The outside drop down works fine in terms of 2-way databinding but the one inside the accordion seems to have only 1-way binding, in other words selecting in the UI is not setting the model value. I found a suggestion <a href="https://stackoverflow.com/questions/22760785/make-an-accordion-with-angularjs-ui-bootstrap-an-using-the-ng-model/22762336#22762336">here</a> that using <code>ng-change</code> will fix this problem. It fixed for <code><textarea></code> but not for <code><select></code>. Wondering this could be bug in <a href="http://angular-ui.github.io/bootstrap/#/datepicker" rel="nofollow noreferrer">angular-ui</a>. Can someone help on this issue. Thanks in advance!</p> <p><strong>outside accordion</strong></p><pre><code> <div class="form-group"> <label class="col-md-2 control-label" for="category">Category</label> <div class="col-md-3"> <select id="category" ng-model="category" name="category" type="text" class="form-control"> <option ng-repeat="category in config.categories.sort()" value="{{category}}"> {{category}}</option> </select> </div> </div> </code></pre><p><strong>Inside accordion</strong></p><pre><code><accordion close-others="false"> <accordion-group> <div class="form-group"> <label class="col-md-2 control-label" for="category">Category</label> <div class="col-md-3"> <select id="category" ng-model="category" ng-change="setCategory(category)" name="category" type="text" class="form-control"> <option ng-repeat="category in config.categories.sort()" value="{{category}}"> {{category}}</option> </select> </div> </div> </accordion-group> </accordion> </code></pre><p>my model <code>categories</code> is an array of string:</p> <p>example: </p><pre><code>"categories": [ "Admin API", "Admin License", "adminGUI", "antennahouse", "App Builder", "Backup/Restore", "Basis"] </code></pre><p><strong>ng-change function</strong></p><pre><code> $scope.setCategory = function(category) { $scope.category = category; }; </code></pre><p> </p><div class="h2_lin"> 解决方案 </div><p>Binding to an attribute of the scope directly is almost a bad idea, because many directives define their own scope, and if your widget (the select box) is inside such a directive, you will in fact bind to an attribute of the child scope rather than binding to an attribute of the controller scope.</p> <p>The rule of thumbs is thus: always have a dot in your ng-model. The form controls should modify an object of your scope, and not your scope directly.</p> <p>In your controller:</p><pre><code>$scope.selection = {}; </code></pre><p>In your view:</p><pre><code><select ng-model="selection.category" ...> </code></pre><p>Also, note that you're using the same ID to identify two select boxes. That will make your DOM invalid. An ID identifies an element uniquely.</p> <p>这篇关于angular-bootstrap 手风琴数据绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2531414');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="angular-bootstrap 手风琴无法打开" href="/2531902.html"> angular-bootstrap 手风琴无法打开; </a> </li> <li> <a target="_blank" title="角引导手风琴数据绑定问题" href="/203316.html"> 角引导手风琴数据绑定问题; </a> </li> <li> <a target="_blank" title="Bootstrap手风琴，点击活动（开放）手风琴顶部滚动？" href="/1012470.html"> Bootstrap手风琴，点击活动（开放）手风琴顶部滚动？; </a> </li> <li> <a target="_blank" title="Bootstrap 3手风琴vs jQuery UI手风琴" href="/1487399.html"> Bootstrap 3手风琴vs jQuery UI手风琴; </a> </li> <li> <a target="_blank" title="AjaxControlToolkit手风琴和数据绑定" href="/1773998.html"> AjaxControlToolkit手风琴和数据绑定; </a> </li> <li> <a target="_blank" title="手风琴手风琴" href="/2612431.html"> 手风琴手风琴; </a> </li> <li> <a target="_blank" title="Twitter Bootstrap手风琴功能" href="/1163839.html"> Twitter Bootstrap手风琴功能; </a> </li> <li> <a target="_blank" title="显示所有bootstrap手风琴" href="/1812759.html"> 显示所有bootstrap手风琴; </a> </li> <li> <a target="_blank" title="Javascript手风琴问题" href="/1410496.html"> Javascript手风琴问题; </a> </li> <li> <a target="_blank" title="手风琴内的手风琴会使父手风琴崩溃" href="/1498908.html"> 手风琴内的手风琴会使父手风琴崩溃; </a> </li> <li> <a target="_blank" title="手风琴面板数据表绑定" href="/1429802.html"> 手风琴面板数据表绑定; </a> </li> <li> <a target="_blank" title="根据 ID 打开 angular-ui-bootstrap 手风琴" href="/2531840.html"> 根据 ID 打开 angular-ui-bootstrap 手风琴; </a> </li> <li> <a target="_blank" title="Angular ui-bootstrap 手风琴不起作用" href="/2612608.html"> Angular ui-bootstrap 手风琴不起作用; </a> </li> <li> <a target="_blank" title="Angular ui-bootstrap 手风琴不起作用" href="/2531434.html"> Angular ui-bootstrap 手风琴不起作用; </a> </li> <li> <a target="_blank" title="如何实现 twitter bootstrap 手风琴?" href="/2612549.html"> 如何实现 twitter bootstrap 手风琴?; </a> </li> <li> <a target="_blank" title="如何实现 twitter bootstrap 手风琴?" href="/2449583.html"> 如何实现 twitter bootstrap 手风琴?; </a> </li> <li> <a target="_blank" title="使用Bootstrap创建手风琴表" href="/565893.html"> 使用Bootstrap创建手风琴表; </a> </li> <li> <a target="_blank" title="使用 Bootstrap 创建手风琴表" href="/2731095.html"> 使用 Bootstrap 创建手风琴表; </a> </li> <li> <a target="_blank" title="Bootstrap手风琴滚动行为崩溃" href="/571374.html"> Bootstrap手风琴滚动行为崩溃; </a> </li> <li> <a target="_blank" title="Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?" href="/2612430.html"> Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?; </a> </li> <li> <a target="_blank" title="手风琴？" href="/962956.html"> 手风琴？; </a> </li> <li> <a target="_blank" title="打开基于ID的angular-ui-bootstrap手风琴" href="/1929221.html"> 打开基于ID的angular-ui-bootstrap手风琴; </a> </li> <li> <a target="_blank" title="jQuery UI手风琴问题" href="/1019475.html"> jQuery UI手风琴问题; </a> </li> <li> <a target="_blank" title="纯 CSS 手风琴问题" href="/2612492.html"> 纯 CSS 手风琴问题; </a> </li> <li> <a target="_blank" title="纯CSS手风琴问题" href="/1773950.html"> 纯CSS手风琴问题; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = 'angular-bootstrap,手风琴,数据,绑定,问题'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>