本篇文章带大家了解一下Angularjs中的视图和指令，希望对大家有所帮助！
|
本篇文章带大家了解一下Angularjs中的视图和指令，希望对大家有所帮助！
AngularJS 视图和指令介绍在第一篇文章中您看到了 AngularJS 如何将应用程序拆分为视图、控制器和模型 (MVC)。本文将深入探讨如何创建 AngularJS 视图。【相关教程推荐：《angular教程》】 在开始之前，让我首先设置一个简单的 AngularJS 应用程序，您可以使用它来体验本文中的示例： <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
<span></span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
//empty controller function
});
</script>
</body>
</html>AngularJS 指令AngularJS 视图将模型中的数据混合到 HTML 模板中。您可以使用 AngularJS指令 来告诉 AngularJS 如何将数据混合到 HTML 模板中。本文将涵盖最常用的 AngularJS 指令。 插值指令 插值指令是 AngujarJS 中最基本的指令之一。插值指令将表达式的结果插入到 HTML 模板中。您可以使用 <div ng-controller="MyController" >
<span> {{myData.text}} </span>
</div>HTML 模板包含在 插值指令还可以插入从模型对象的函数返回的数据。下面是一个例子： <div ng-controller="MyController" >
<span>{{myData.textf()}}</span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.textf = function() { return "A text from a function"; };
});
</script>在此示例中，插值指令 该 ng-bind 指令 该 <div ng-controller="MyController" > <span ng-bind="myData.textf()"></span> </div> 这会将 从模型中转义 HTML如果从模型获得的数据包含 HTML 元素，则这些元素在插入 HTML 模板之前会被转义。转义意味着 HTML 显示为文本，而不是 HTML。 这样做是为了防止 HTML 注入攻击。例如，在聊天应用程序中，有人可能会 您可以使用 <div ng-controller="MyController" > <span ng-bind-html-unsafe="myData.textf()"></span> </div> 在禁用 HTML 转义时，您应该非常小心。确保没有显示不受信任的 HTML。 条件渲染AngularJS 可以根据模型中数据的状态显示或隐藏 HTML。您可以使用一组专门为此目的创建的 AngularJS 指令。我将在以下部分中介绍这些指令。 ng-show + ng-hide 指令 的 <div ng-controller="MyController" >
<span ng-show="myData.showIt"></span>
<span ng-hide="myData.showIt"></span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
</script>此示例创建两个 注意控制器函数如何将 设置 HTML 元素（ ng-switch 指令
<div ng-controller="MyController" >
<div ng-switch on="myData.switch">
<div ng-switch-when="1">Shown when switch is 1</div>
<div ng-switch-when="2">Shown when switch is 2</div>
<div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.switch = 3;
});
</script>此示例包含一个
该 在上面的示例中，控制器函数设置 ng-if 指令 该 <div ng-controller="MyController" >
<div ng-if="myData.showIt">ng-if Show it</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
</script>
ng-include 指令 该 <div ng-controller="MyController" >
<div ng-include="'angular-included-fragment.html'"></div>
</div>T此示例将文件包含 您可以根据条件包含 HTML 片段。例如，您可以在两个文件之间进行选择，如下所示： <div ng-controller="MyController" >
<div ng-include="myData.showIt &&
'fragment-1.html' ||
'fragment-2.html'"></div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
</script>此示例将包括 ng-repeat 指令 该 这是一个简单的 <ol>
<li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>此示例将为数组中的 您还可以迭代从函数调用返回的集合。下面是一个例子： <ol>
<li ng-repeat="theItem in myData.getItems()">{{theItem.text}}</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
$scope.myData.getItems = function() { return this.items; };
});
</script>您可以使用稍微不同的语法迭代 JavaScript 对象的属性： <ol>
<li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
});
</script>注意指令的 特殊的 ng-repeat 变量 该
该 的 重复多个元素 到目前为止，您只看到了如何使用 <div ng-repeat="(name, value) in myData.myObject">
<div>{{name}}</li>
<div>{{value}}</li>
</div>但是，将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有 <ol>
<li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li>
<li ng-repeat-end>{{value}}</li>
</ol>此示例将为 中的 过滤上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。 该 <div ng-repeat="item in myData.items | filter: itemFilter"></div> 注意 <script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
$scope.itemFilter = function(item) {
if(item.text == "two") return false;
return true;
}
}
});
</script>格式化过滤器 AngularJS 带有一组内置格式过滤器，可以与插值指令和
这是一个日期过滤器示例： <span>{{myData.theDate | date: 'dd-MM-yyyy'}}</span>此示例显示了 这是一个数字过滤器示例： <span>{{myData.theNumber | number: 2}}</span>此示例将 下面是一个小写和大写过滤器示例： <span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>数组过滤器 AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是： 数组过滤器：
下面是一个 <span>{{myData.theText | limitTo: 3}}</span>这将 该 <ol>
<li ng-repeat="item in myData.items | filter:filterArray">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items =
[ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
$scope.filterArray = function(item) {
if(item.text == "two") return false;
return true;
}
} );
</script>此示例调用 下面是一个 <ol>
<li ng-repeat="item in myData.items | orderBy:sortField:reverse">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
$scope.sortField = "text";
$scope.reverse = true;
} );
</script>所述 该 链接过滤器 可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时，一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子： <span>{{myData.theText | limitTo: 5 | uppercase}}</span>此示例首先 将过滤器输出分配给变量 可以将过滤器的输出分配给一个临时变量，然后您可以稍后在视图中引用该变量。下面是一个例子： <ol>
<li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<div>{{filteredItems.length}}</div>此示例将过滤的输出分配给 实现自定义过滤器 如果 AngularJS 过滤器不适合您的需要，您可以实现自己的过滤器。下面是一个例子： <div>Filtered: {{myData.text | myFilter}}</div>
<script>
var module = angular.module("myapp", []);
module.filter('myFilter', function() {
return function(stringValue) {
return stringValue.substring(0,3);
};
});
</script>此示例向 AngularJS 注册了一个过滤器，它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册 如果您的过滤器需要更多的输入参数，请在过滤器函数中添加更多参数，并在过滤器名称和 <div>Filtered: {{myData.text | myFilter :2:5}}</div>
<script>
var module = angular.module("myapp", []);
module.filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>注意过滤器引用 ( 更多编程相关知识，请访问：编程入门！！ 以上就是深入了解Angularjs中的视图和指令的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
