AngularJS 笔记一(指令directive)

最新推荐文章于 2021-06-21 15:38:34 发布

snow51

最新推荐文章于 2021-06-21 15:38:34 发布

阅读量172

点赞数

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/snow51/article/details/81028640

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AngularJS ---诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。
版本地址：https://code.angularjs.org/

Directive (ng内置的指令)

(注：HTML5规范要求所有的用户自定义属性以"data-“开头，所以data-是符合HTML5规范的写法)
#####1、data-ng-app=”" ;参数值可选：指定载应用模块的名称
1)data-ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
2)所有 AngularJS 应用都必须要要一个根元素。
3)HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用

<body data-ng-app="myApp">
 
</body>

#####2、ng-init="" ;参数值为指定要执行的变量或表达式。初始化应用时执行指定表达式创建一个变量

<div ng-app="" ng-init="myText='Hello World!'">
   <h1>{{myText}}</h1>
</div>

#####3、ng-bind="" ;参数为指定要执行的变量或表达式。

<div ng-app="" ng-init="myText='Hello World!'">
    <p ng-bind="myText"></p>
</div>

#####4、ng-model="" ;参数为表单域的属性名。指令绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
</div>
 
<script>
var app = angular.module('myApp', []);   // 一切从模块化开始
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

#####5、ng-class="" ; 参数为表达式返回一个或多个类名。可以是字符串，对象，或一个数组, key-value 对,key为布尔值

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>
 
<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

#####6、ng-controller="" ; 参数为控制器的名称，指令用于为你的应用添加控制器
#####7、ng-hide="" ; 参数为布尔值，指令在表达式为 true 时隐藏 HTML 元素
#####8、ng-href="" ; 参数为字符串，表达式的执行结果。指令覆盖了原生的 a元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

<div ng-init="myVar = 'http://www.angularjs.net.cn'">
    <h1>AngularJS中文网</h1>
    <p>访问 <a ng-href="{{myVar}}">{{myVar}}</a>学习!</p>
</div>

#####7、ng-if="" ; 参数为布尔值，指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
   <h1>Welcome</h1>
</div>

#####8、ng-include=""; 参数为可以是一个表达式，返回一个文件名。指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。默认情况下，包含的文件需要包含在同一个域名下。

<div ng-include="'myFile.html'"></div>

#####9、ng-list="" ; 参数为定义分隔符，默认是逗号分隔。指令将字符串转换为数组，并使用逗号分隔。ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。

<div ng-app="">
   <input ng-model="customers" ng-list/>
<pre>{{customers}}</pre>  // output为输入框中的字符组成的数组

#####10、ng-non-bindable ; 无参数值，告知AngularJS无需编译该元素或其子元素
#####11、ng-repeat="" ; 该指令为集合中的每项都实例化一个模块
循环中的特殊变量，包括：
$index —number 当前索引值。
$first —boolean 当循环的对象存在第一项时为true。
$middle—boolean 当循环的对象存在中间项时为true。
$last —boolean 当循环对象存在最后一项时为true。
$even —boolean 循环的对象在当前位置的"$index"(索引)是偶数则为true，否则为false。
$odd —boolean 循环的对象在当前位置的"$index"(索引)是奇数则为true，否则为false。

<div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>

#####12、ng-show="" ; 如果表达式为 true 则显示指定的 HTML 元素。

<input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
	<h1>Welcome</h1>
</div>

#####13、ng-src="" ; 指令覆盖了元素的 src 属性。如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。ng-src 指令确保的 AngularJS 代码执行前不显示图片。

<div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
    <img ng-src="{{myVar}}">
</div>

#####14、ng-style="" ; 指令为 HTML 元素添加 style 属性。ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值注册，即 key=>value 对。

<body ng-app="myApp" ng-controller="myCtrl">
   <h1 ng-style="myObj">菜鸟教程</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl",      function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "coral",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

15、ng-switch = “” ; 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

<select ng-model="myVar">
  <option value="run">www.runoob.com
  <option value="google">www.google.com
  <option value="taobao">www.taobao.com
</select>

<div ng-switch="myVar">
  <div ng-switch-when="run">
     <h1>菜鸟教程</h1>
     <p>欢迎访问菜鸟教程</p>
  </div>
  <div ng-switch-when="google">
     <h1>Google</h1>
     <p>欢迎访问Google</p>
  </div>
  <div ng-switch-when="taobao">
     <h1>淘宝</h1>
     <p>欢迎访问淘宝</p>
  </div>
  <div ng-switch-default>
     <h1>切换</h1>
     <p>选择不同选项显示对应的值。</p>
  </div>
</div>

16、ng-options = “” ；----以下的用法
注意：ng-modal= “” 的值绑定应该是字符串类型，否则会出现空的option

//对于数组：
 label for value in array
 select as label for value in array
 label group by group for value in array
 label disable when disable for value in array
 label group by group for value in array track by trackexpr
 label disable when disable for value in array track by trackexpr
 label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
 
//对于对象：
 label for (key , value) in object
 select as label for (key ,value) in object
 label group by group for (key,value) in object
 label disable when disable for (key, value) in object
 select as label group by group for(key, value) in object

//例子：
<div class="row">
	<div class="col-md-6">
		<select  class="form-control" ng-change="vo.cityId=null;changeProvince(CityVo);"  
		ng-model="vo.provinceObj" ng-disabled="isDisabled"
			ng-options="provinceItem as provinceItem.province for provinceItem in allCityList track by provinceItem.province"> 
			//ng-model的值为通过遍历得到provinceItem，界面显示的是provinceItem.province值，但是选择后输入框中绑定到provinceItem；track by 防止值有重复
			<option value="" ng-hide="hidePleaseSelect"> 请选择 </option>
		</select>
	</div>
	<div class="col-md-6">
		<select  class="form-control"  ng-change="getCityObj(vo.cityId);changeCity(CityVo);"  ng-model="vo.cityId" 
			ng-disabled="isDisabled || !vo.provinceObj" 
			ng-options="cityItem.id as cityItem.name for cityItem in vo.provinceObj.cityList">
			//ng-model的值是通过遍历得到的cityItem.id，as表示option的value值,通过cityItem in vo.provinceObj.cityList遍历得到的cityItem.name，cityItem.name选中后输入框绑定到ng-model="vo.cityId" 的值为cityItem.id
			<option value="" ng-hide="hidePleaseSelect"> 请选择 </option>
    	</select>
	</div>
</div>

Angular 使用的CSS类
ng-scope —用法: angular把这个类附加到所有创建了新作用域(Scope)的HTML元素上。
ng-binding—用法: angular把这个类附加到所有通过 ng-bind 或绑定了任何数据的元素上。
ng-invalid, ng-valid —用法: angular把这个类附加到进行了验证操作的所有input组件元素上。
ng-pristine, ng-dirty —用法: angular的input指令给所有新的、还没有与用户交互的input元素附加上ng-pristine类，当用户有任何输入时，则附加上 ng-dirty.