ng-options&&ng-switch
Wscats opened this issue · 0 comments
Wscats commented
1.ng-options接受一个对象数组
$scope.options = [{
id:'a',
name: '表达式'
}, {
id:'b',
name: '指令'
}, {
id:'c',
name: '作用域'
}];
然后进行转换
option.id as option.name for option in options
格式为option标签的value值 as option内容 for 数组索引项 in 控制器作用域绑定的数组
源码如下:
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="utf-8">
<script src="../js/angular.js"></script>
</head>
<body ng-controller="baseCtrl">
Angular
<select ng-model="myWsscat" ng-options="option.id as option.name for option in options">
<option value="">控制器</option>
</select>
<hr>
<div ng-switch="myWsscat">
<div ng-switch-when="a">
<div ng-include="'a.html'"></div>
</div>
<div ng-switch-when="b" ng-controller="bCtrl">
<h1>{{name}}</h1>
<p>AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 完整的指令内容可以参阅 AngularJS 参考手册。</p>
</div>
<div ng-switch-when="c">
<h1>AngularJS 作用域</h1>
<p>Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:</p>
</div>
<div ng-switch-default>
<h1>AngularJS 控制器</h1>
<p> AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。</p>
</div>
</div>
<hr>
<p> AngularJS 事件 AngularJS 支持以下事件: ng-click ng-dbl-click ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-keydown ng-keyup ng-keypress ng-change
</p>
</body>
<script>
var app = angular.module('wsscat', []);
app.controller('baseCtrl', function($scope) {
$scope.options = [{
id:'a',
name: '表达式'
}, {
id:'b',
name: '指令'
}, {
id:'c',
name: '作用域'
}];
})
app.controller('bCtrl',function($scope){
$scope.name = 'AngularJS 指令';
})
</script>
</html>
2.ng-include
引用一个同域的文件
ng-include="'a.html'",注意文件外面有个单引号,少了会失效
<h1>AngularJS 表达式</h1>
<p>AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置"输出"数据。 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}</p>