AngularJS – 显示和隐藏多个内容
发布时间:2020-12-17 17:48:41 所属栏目:安全 来源:网络整理
导读:在AngularJS中,为了简单地通过标记显示字段,我会这样做: div ng-show="aField"Content of aField/diva ng-click="aField=true"Show aField/a 直到这里,没问题. 我现在想要添加更多按钮和字段,以便当我点击A时显示A的内容,然后当我点击按钮B时,A的内容消失,B
在AngularJS中,为了简单地通过标记显示字段,我会这样做:
<div ng-show="aField">Content of aField</div> <a ng-click="aField=true">Show aField</a> 直到这里,没问题. 我怎样才能做到这一点?谢谢. UPDATE 谢谢大家的解决方案,他们的作品!现在,我正在为每个内容做一个模板,因为我有很多数据要显示,但都在同一个结构中. 这里是index.html <div ng-model="methods" ng-include="'templateMethod.html'" ng-repeat = "method in methods"> 这里是script.js: function Ctrl($scope) { $scope.methods = [ { name: 'method1',description: 'bla bla bla',benefits: 'benefits of method1',bestPractices : 'bestPractices',example: 'example'},{ name: 'method2',benefits: 'benefits of method2',example: 'example'} ]; } 这里是templateMethod.html: <table> <tr> <td> <div ng-show="toShow=='{{method.name}}Field'"> <h3>{{mmethodethod.name}}</h3> <p> <strong>Description</strong> {{method.description}} </p> <p> <strong>Benefits</strong> {{method.benefits}} </p> <p> <strong>Best practices</strong> {{method.bestPractices}} </p> <p> <strong>Examples</strong> {{method.example}} </p> </div> </td> <td class = "sidebar"> <ul> <li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li> </ul> </td> </tr> </table> 有用! 谢谢 解决方法
在控制器中处理更复杂的逻辑可能更好,但一般认为指令字符串的内容为普通的js:
<div ng-show="aField">Content of aField</div> <div ng-show="bField">Content of bField</div> <a ng-click="aField=true; bField=false">Show aField</a> <a ng-click="aField=false; bField=true">Show bField</a> 或者与ng-hide一起使用ng-show: <div ng-show="aField">Content of aField</div> <div ng-hide="aField">Content of bField</div> <a ng-click="aField=true">Show aField</a> <a ng-click="aField=false">Show bField</a> 在以前的策略中,页面加载时没有任何显示.在后者中,bField内容默认显示.如果您有两个以上的项目,您可能会执行以下操作: <div ng-show="toShow=='aField'">Content of aField</div> <div ng-show="toShow=='bField'">Content of bField</div> <div ng-show="toShow=='cField'">Content of cField</div> <a ng-click="toShow='aField'">Show aField</a> <a ng-click="toShow='bField'">Show bField</a> <a ng-click="toShow='cField'">Show cField</a> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读