angularjs 基础指令(四)
文章目录
- 文章参考
- ng-bind 类似于 {{}}
- ng-repeat
- ng-class
- ng-style
- ng-include
- ng-bind-html
- ng-checked
- ng-click
- ng-href
- ng-src
- ng-if
- ng-hide
- ng-show
- ng-switch
文章参考
- angularjs 参考手册
ng-bind 类似于 {{}}
指令把应用程序数据绑定到 HTML 视图
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入:p>
<p>姓名: <input type="text" ng-model="name">p>
<p ng-bind="name">p>
div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js">script>
body>
html>
ng-repeat
- 指令用于循环输出指定次数的 HTML 元素。
- 集合必须是数组或对象。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"菜鸟教程1",
"菜鸟教程2",
"菜鸟教程3",
"菜鸟教程4",
]
});
script>
body>
html>
ng-class
- 用于给 HTML 元素动态绑定一个或多个 CSS 类
- 值可以是字符串，对象，或一个数组
例子 一
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:coral;
padding:40px;
font-family:Verdana;
}
style>
head>
<body ng-app="">
<p>选择一个类:p>
<select ng-model="home">
<option value="sky">天空色option>
<option value="tomato">番茄色option>
select>
<div ng-class="home">
<h1>Welcome Home!h1>
<p>I like it!p>
div>
body>
html>
例子二
<ion-list show-delete="isEditor">
<ion-item ng-repeat="item in goodlists" >
<span class="float_right icon ion-ios-checkmark font_24" ng-class="{'color_3eb034':item.is_default==1}" ng-click="chooseItem($event,'{{item.id}}')">span>
<span class="clear_both">span>
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item,'{{item.id}}')">ion-delete-button>
ion-item>
ion-list>
ng-class="{'color_3eb034':item.is_default==1}";判断item.is_default是否等于1，如果等于1就显示color_3eb034。
ng-style
- 指令为 HTML 元素添加 style 属性。
- 属性值必须是对象，表达式返回的也是对象。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<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>
html>
ng-include
使用 ng-include 指令来包含 HTML
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
<div ng-include="'myFile.htm'">div>
body>
html>
ng-bind-html
指令是通一个安全的方式将内容绑定到 HTML 元素上。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
<script src="https://cdn.staticfile.org/angular.js/1.5.0-beta.0/angular-sanitize.min.js">script>head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText">p>
div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: John Doe
";
});
script>
<p><b>注意:b> 该实例包含了 "angular-sanitize.js" 文件,
该文件移除 HTML 中的危险代码。p>
body>
html>
ng-checked
指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
<p>My cars:p>
<input type="checkbox" ng-model="all"> Check all<br><br>
<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
<p>点击 "Check all" 选择所有的车。 ----- {{all}}p>
body>
html>
ng-click
指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
<p>点击按钮:p>
<button ng-click="count = count + 1" ng-init="count=0">OKbutton>
<p>按钮被点击了 {{count}} 次。p>
<p>实例中，按钮每被点击一次变量 "count" 会自动加 1。p>
body>
html>
ng-href
指令覆盖了原生的 元素 href 属性。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
<div ng-init="myVar = 'http://www.runoob.com'">
<h1>菜鸟教程h1>
<p>访问 <a ng-href="{{myVar}}">{{myVar}}a> 学习!p>
div>
<p>该实例可以使用了原生的 href 属性，但在 AngularJS 中， ng-href 属性更安全。p>
body>
html>
ng-src
指令覆盖了 元素的 src 属性。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
<div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
<h1>Angularh1>
<img ng-src="{{myVar}}">
div>
<p>该实例可以使用原生的 src 输出，但是使用 AngularJS 代码插入值，使用 ng-src 属性更好。p>
body>
html>
ng-if
指令用于在表达式为 false 时移除 HTML 元素。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcomeh1>
<p>Welcome to my home.p>
<hr>
div>
<p>当复选框取消选中时 DIV 元素将移除。p>
<p>当重新选中复选框，DIV 元素会重新显示。p>
body>
html>
ng-hide
指令在表达式为 true 时隐藏 HTML 元素。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
隐藏 HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcomeh1>
<p>Welcome to my home.p>
div>
body>
html>
ng-show
指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
显示 HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcomeh1>
<p>Welcome to my home.p>
div>
body>
html>
ng-switch
- 指令根据表达式显示或隐藏对应的部分
- 对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
- 你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="">
我喜欢的网站
<select ng-model="myVar">
<option value="runoob">www.runoob.com
<option value="google">www.google.com
<option value="taobao">www.taobao.com
select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="runoob">
<h1>菜鸟教程h1>
<p>欢迎访问菜鸟教程p>
div>
<div ng-switch-when="google">
<h1>Googleh1>
<p>欢迎访问Googlep>
div>
<div ng-switch-when="taobao">
<h1>淘宝h1>
<p>欢迎访问淘宝p>
div>
<div ng-switch-default>
<h1>切换h1>
<p>选择不同选项显示对应的值。p>
div>
div>
<hr>
<p> ng-switch 指令根据当前的值显示或隐藏对应部分。p>
body>
html>