在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如:
function ctr($scope){ $scope.test =“classname”; } <div class=”{{test}}”></div>
这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。
在angular中为我们提供了3种方案处理class:
1:scope变量绑定,如上例。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。
我们继续其他两种解决方案:
1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;
function Ctr($scope) { $scope.isActive = true; } <div ng-class="{true: 'active', false: 'inactive'}[isActive]"> </div>
其结果是2中组合,isActive表达式为true,则 active,负责inactive。
2对象key/value处理主要针对复杂的class混合,其形如:
function Ctr($scope) { } <div ng-class {'selected': isSelected, 'car': isCar}"> </div>
当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。
个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。
相关推荐
本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化,先前添加的类会被...
有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): ...div ng-class={true:'selected',false:'unselected'}[is
本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> &...
本文主要介绍AngularJS ng-class-even 指令,这里整理了ng-class-even基础知识资料,并附实例代码和效果图,学习AngularJS指令的朋友可以看下
ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。 例如: index.html <div class=uk-panel ng-controller=UserCtrl> <ul class=uk-list> <li ng-repeat-start=...
button ng-repeat=t in deptName class=deptDiv ng-class={'deptDivOnclick':selected==t.name} ng-click=showDeptEmps(t.name )>{{ t.name }} </button> 2、angular代码如下所示: $scope....
本文主要介绍AngularJS ng-class 指令,这里帮大家整理了ng-class资料和示例代码,学习AngularJS指令的同学可以参考下
本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表...
ng-toggle AngularJS指令用于切换show元素和单击外部隐藏 用法 提供ngToggle和ngToggleShow指令的Ng-toggle模块。 这两个指令不能单独工作-ngToggleShow指令应嵌套在ngToggle指令中... div class = "menu-dropdown" ng
您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。建造运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。运行单元测试运行ng test以通过...
├最新AngularJS开发宝典—第005讲 $scope的基本使用方法.mp4 ├最新AngularJS开发宝典—第006讲 表达式与ng-bind及ng-cloak解决闪屏问题.mp4 ├最新AngularJS开发宝典—第007讲 ng-model在表单中双向绑定实例分析...
这里就要使用到Angularjs中个ng-include指令。下面来看看详细的介绍: 一、多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变。 第一个需求我们可以使用一个...
使用LitElement和ng-lit的一些帮助程序,您可以逐步更新您的旧应用程序。 :woman::rocket: 正在安装npm i -S ng-lit ng-lit允许您将对象和数组从应用程序传递到视图中,而无需自己解析或查看它们。 :man::laptop: ...