在本文中，我们将详细介绍angularJs中关于ng-class的三种使用方式说明的各个方面，并为您提供关于angularjsng-class的相关解答，同时，我们也将为您带来关于AngularJSn
在本文中，我们将详细介绍angularJs中关于ng-class的三种使用方式说明的各个方面，并为您提供关于angularjs ng-class的相关解答，同时，我们也将为您带来关于AngularJS ng依赖注入的三种方式、angularjs – 如何使用ngClass的动态值、AngularJS 世界------Angularjs指令的使用方式和自定义指令、angularJs 中关于 ng-class 的三种使用方式说明的有用知识。
本文目录一览：- angularJs中关于ng-class的三种使用方式说明（angularjs ng-class）
- AngularJS ng依赖注入的三种方式
- angularjs – 如何使用ngClass的动态值
- AngularJS 世界------Angularjs指令的使用方式和自定义指令
- angularJs 中关于 ng-class 的三种使用方式说明
angularJs中关于ng-class的三种使用方式说明（angularjs ng-class）
在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。
而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性
这里有三种方法：
第一种：通过数据的双向绑定（不推荐）
第二种：通过对象数组
第三种：通过key/value
下面简单说下这三种：
第一种：通过数据的双向绑定
实现方式：
functionchangeClass(){
$scope.className="change2";
}
<div></div>
网上各种不推荐，说实话，既然angularJS双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原由：“在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object”，当然并没有明文固定不能够这么使用的，而且反而我觉得这样非常的方便，让html中元素想怎么变就怎么变！同理中的img元素中的src就不可以通过别的来改变，但是通过这种方式就是可以的！
当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之~
第二种：通过字符串数组的形式来改变
实现方式：
functionchangeClass(){
$scope.className=true/false;
}
<divng-></div>
实现很简单，就是当className为真的时候class为zhende，相反则为jiade。
但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！
第三种：通过key/value的方式
实现方式：
functionchangeClass(){
$scope.lala=true;
}
<divng-></div>
当lala为true的时候，class则为haha，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾~
所以基本上，angularJS中ng-class的实现就这三种方式~
AngularJS ng依赖注入的三种方式
1.内联式注入(最基本的方式)
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<title>最基本的依赖注入方式</title>
<Meta charset="utf-8"/>
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="base.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div>
<div ng-controller="MyCtrl">
<span>{{gameName}}</span>
</div>
</div>
</body>
</html>
//最基本的依赖注入方式
var MyModule = angular.module("MyModule",[]);
MyModule.controller('MyCtrl',['$scope',function($scope){ //可以修改参数，如$scope1,但下面必须同时改
$scope.gameName = "海哥帅！"
}
]);
2.推断型注入
//推断型注入方式:函数参数的名称必须要和被注入的对象相同
var MyModule = angular.module("MyModule",[]);
var MyCtrl = function($scope){
$scope.gameName = "海哥帅！";
}
MyModule.controller('MyCtrl',MyCtrl);
3.声明式注入
//声明式注入
var MyModule = angular.module("MyModule",[]);
var MyCtrl = function(thisISMyName){ //参数名称可以随意变化
thisISMyName.gameName = "海哥帅！";
}
MyCtrl.$inject = ['$scope']; //加载模块
MyModule.controller('MyCtrl',MyCtrl);
angularjs – 如何使用ngClass的动态值
例如：
< divng-class =“{item.name：item.name}”>
所以item.name的值被添加到类中.这似乎什么都不做.有什么建议如何做到这一点？
谢谢！
编辑：
这实际上是在选择中使用ng选项来完成的.例如：
< select ng-options =“c.code as c.name for c in countries”>< / select>
现在,我想应用一个具有c.code值的类名
我发现以下指令,似乎有效,但不是插值的值：
angular.module('directives.app').directive('optionsClass',['$parse',function ($parse) {
'use strict';
return {
require: 'select',link: function(scope,elem,attrs,ngSelect) {
// get the source for the items array that populates the select.
var optionsSourceStr = attrs.ngOptions.split(' ').pop(),// use $parse to get a function from the options-class attribute
// that you can use to evaluate later.
getoptionsClass = $parse(attrs.optionsClass);
scope.$watch(optionsSourceStr,function(items) {
// when the options source changes loop through its items.
angular.forEach(items,function(item,index) {
// evaluate against the item to get a mapping object for
// for your classes.
var classes = getoptionsClass(item),// also get the option you're going to need. This can be found
// by looking for the option with the appropriate index in the
// value attribute.
option = elem.find('option[value=' + index + ']');
// Now loop through the key/value pairs in the mapping object
// and apply the classes that evaluated to be truthy.
angular.forEach(classes,function(add,className) {
if(add) {
angular.element(option).addClass(className);
}
});
});
});
}
};
}]);
<div ng->
是. ‘和{{for classname.
AngularJS 世界------Angularjs指令的使用方式和自定义指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。
AngularJS 内置指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
例如之前用过的几个指令：
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
基本的指令内容可以参考angularjs指令手册
<div ng-app="" ng-init="blogname='艾斯博弈'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="blogname"></p> <p>你输入的为： {{ blogname}}</p> </div>
数据绑定
数据绑定是angularjs有一个重要的特性
上面实例中的 {{ blogname}} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ blogname}} 是通过 ng-model=”blogname” 进行同步。
重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>
总结以上几个指令
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=”myModule”）连接到代码模块。
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
*使用驼峰法来命名一个指令， iceboyDirective,
但在使用它时需要以 - 分割,iceboy-directive；
*自定义指令可以通过多种方式来进行调用，
也可以限制你的指令只能通过特定的方式来调用，
如：元素名、属性、类名、注释
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用，需要增加 replace : true,
restrict 默认值为 EACM,即可以通过元素名、属性名、类名和注释来调用指令。
<body ng-app="myApp"> <iceboy-directive></iceboy-directive> <div iceboy-directive></div> <div class="iceboy-directive"></div> <!-- directive: iceboy-directive --> <script> var app = angular.module("myApp",[]); app.directive("iceboyDirective",function() { return { restrict : "EACM",replace : true,template : "<h1>MySelf-Directive!</h1>" }; }); </script> </body>
angularJs 中关于 ng-class 的三种使用方式说明
在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。
而在这所谓的样子当然就是改变其 css 的属性，而实现能动态的改变其属性值，必然只能是更换其 class 属性
这里有三种方法：
第一种：通过数据的双向绑定（不推荐）
第二种：通过对象数组
第三种：通过 key/value
下面简单说下这三种：
第一种：通过数据的双向绑定
实现方式：
function changeClass(){
$scope.className = "change2";
}
<div class="{{className}}"></div>网上各种不推荐，说实话，既然 angularJS 双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原由：“在 controller 涉及了 classname 在我看来是乎总是那么诡异，我希望的是 controller 是一个干净的纯 javascript 意义的 object”，当然并没有明文固定不能够这么使用的，而且反而我觉得这样非常的方便，让 html 中元素想怎么变就怎么变！同理中的 img 元素中的 src 就不可以通过别的来改变，但是通过这种方式就是可以的！
当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之～
第二种：通过字符串数组的形式来改变
实现方式：
function changeClass(){
$scope.className = true/false;
}
<div ng-class="{true:''zhende'',false:''jiade''}[className]"></div>实现很简单，就是当 className 为真的时候 class 为 zhende，相反则为 jiade。
但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！
第三种：通过 key/value 的方式
实现方式：
function changeClass(){
$scope.lala = true;
}
<div ng-class="{''selectClass'':select,''choiceClass'':choice,''haha'':lala}"></div>当 lala 为 true 的时候，class 则为 haha，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾～
所以基本上，angularJS 中 ng-class 的实现就这三种方式～
关于angularJs中关于ng-class的三种使用方式说明和angularjs ng-class的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于AngularJS ng依赖注入的三种方式、angularjs – 如何使用ngClass的动态值、AngularJS 世界------Angularjs指令的使用方式和自定义指令、angularJs 中关于 ng-class 的三种使用方式说明等相关知识的信息别忘了在本站进行查找喔。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
