angular js常用指令ng-message、ng-class、ng-option、ng-value、ng-click是如何使用的？

【JS-06】

小课堂【angular js常用指令ng-message、ng-class、ng-option、ng-value、ng-click是如何使用的？】

分享人：蓝东

目录

1.背景介绍

2.如何使用

3.代码实战

4.参考文献

1.背景介绍

Angular内置指令

AngularJS通过被称为 指令 的新属性来扩展HTML。

AngularJS通过内置的指令来为应用添加功能。

AngularJS允许你自定义指令。

AngularJS指令是扩展的HTML属性，带有前缀ng-。

常用的angular指令有：

ng-if:如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。

ng-controller:ng-controller指令用于为你的应用添加控制器。

ng-disabled:在AngularJS中通过表达式返回值true/false令其生效。

2.如何使用

ng-click

ng-click指令告诉了AngularJS HTML元素被点击后需要执行的操作。

ng-class

定义和用法

ng-class指令用于给HTML元素动态绑定一个或多个CSS类。

ng-class指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用key-value对，key为你想要添加的类名，value是一个布尔值。只有在value为true时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

function ctrl($scope) {

$scope.isA = true;

$scope.isB = false;

$scope.isC = false;}

ng-option

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会被绑定到ng-model。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。

var app = angular.module('app', []);

app.controller('selectController', function ($scope) {

$scope.mycity = '北京';

$scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' }];});

ng-value

var m=angular.module('hd',[]);

m.controller('ctrl',['$scope',function($scope){

$scope.goods={"name":"apple","price":20,"num":2};

}])

名称：

价格： 

数量：

总价：

3.代码实战

    

4.参考文献

AngularJS内置指令

鸣谢

感谢大家观看

BY :蓝东