Javascript 应用css后计算ng类中的角度表达式(后期绑定)
我有一个Javascript 应用css后计算ng类中的角度表达式(后期绑定),javascript,css,angularjs,ng-class,Javascript,Css,Angularjs,Ng Class,我有一个ng类,其中类是动态加载的,即在表达式中计算$rootscope,会发生后期绑定 <li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li> 这里{{vm.$rootScope.curr
ng类
,其中类是动态加载的,即在表达式中计算$rootscope
,会发生后期绑定
<li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li>
这里{{vm.$rootScope.currentPage}}
表达式在加载控件的类后进行求值,如果give 1正在工作,或者如果我签入inspect元素,我可以看到[1==1]
即{vm.$rootScope.currentPage}
这返回了正确的值,但是类没有得到应用
可以引用此您应该使用
[vm.$rootScope.currentPage==1]
而不是[{{vm.$rootScope.currentPage}==1]
。无需在[]
需要改变
ng class=“{true:'active',false:'inactive'}”而不是ng class=“{'active':true,'inactive':false}”
对于ng class=“{true:'active',false:'inactive'}[vm.$rootScope.currentPage==1]”,
class应用方式
如果表达式值为true,则应用类active
如果表达式值为false,则应用类inactive
因此,请使用:
<li role="presentation" style="width:200px" ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage===1]"><a href="#/create">Create</a></li>
试试这个-ng class=“vm.$rootScope.currentPage==1?”“活动”:“非活动”
您正在为Angular添加多个额外的工作层,只是为了一个简单的真/假测试。最值得注意的是,在ng指令中有一个{{}
表达式。好了,所有这些都已经跟踪了您输入的表达式,添加{{}
只会添加更多需要关注的内容
您也可以将其简单地称为currentPage
,而不是vm.$rootScope.currentPage
,但这取决于您是否已为任何组件设置了作用域。它不起作用,并且如果不放置代码表达式,则ng类将不会将其视为角度表达式,尤其是ng类,ng show和ng hide AFAIKvm.$rootScope.currentPage==1?'active':'inactive'
是一个表达式。我认为您可能引用了错误的内容。不起作用,在inspect元素中,我可以看到[{vm.$rootScope.currentPage===1}}]这是[true],但类仍然没有应用,因为表达式计算是在类应用于该控件后完成的更新了我的答案并添加了plunker demo@sudhirAwesome bro,实际上,在click函数中,我维护了一个全局变量,并更新了单个控制器中的变量,该变量在应用类后得到更新。任何这一切工作,因为我正在使用点击功能和传递参数,这是更好的方式,谢谢!不客气。实际上,我添加了两个按钮来更改页面和检查更改。您可以根据需要使用,并且我给出了设置类的有效表达式。可以接受,如果有帮助:)可以接受,但问题是为什么在计算rootscope时不起作用,也就是说,它正在更新,但该表达式是在应用类之后计算的。但是,您提供的解决方案最适合我的场景
<li role="presentation" style="width:200px" ng-class="vm.currentPage===1? 'active': 'inactive'">
<a href="#/create">Create</a>
</li>