本网站只能被运行在支持JavaScript脚本的环境中

第二节 使用控制器

AngularJs采用MVC形式。MVC是指M(Model:模型)V(View:视图)C(Controller:控制器)。本文介绍如何使用控制器。通过控制器的使用,我们可以书写非常简洁的脚本代码。

此处,我们介绍一个依序显示数组中所有字符串的脚本程序。

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
var MyApp = angular.module('MyApp', []);
MyApp.controller('TestCtrl',['$scope',function ($scope) {
    $scope.animals = ["dog", "cat", "monkey", "elephant", "Lion", "giraffe"];
}]);
</script>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div class="bg-success" ng-controller="TestCtrl">
            <div ng-repeat="animal in animals">
                <p>{{animal}}</p>
            </div>
        </div>
    </div>
</body>
</html>

在脚本代码中,var MyApp = angular.module(<模块名>, []);表示创建一个模块,angular.module方法采用两个参数,第一个参数值为模块名,第二个参数值为一个数组,其中存放所有需要加载的模块(在第五节中详述)。MyApp.controller(<控制器名>, ['$scope', function ($scope) {表示为MyApp模块创建一个TestCtrl控制器。在控制器代码中,$scope.animals = ...表示在控制器的作用域内创建一个animals数组。

在HTML代码中,<body ng-app="MyApp">表示为body元素使用MyApp模块。

<div class="bg-success" ng-controller="TestCtrl">表示为div元素使用MyApp模块的TestCtrl控制器,在该div元素中即可以使用在TestCtrl控制器的作用域中定义的对象或方法。

<div ng-repeat="<变量名> in <数组名>">表示遍历数组并取出其中每一个元素并将其赋值给“<变量名>”所表示的变量。该div元素的结束标签同时表示遍历结束。

数组的各种显示方法

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
//代码略
</script>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div ng-controller="TestCtrl">
            <div class="bg-success">
                <h2>标准显示:</h2>
                <div ng-repeat="animal in animals">
                    <p>{{animal}}</p>
                </div>
            </div>

            <div class="bg-info">
                <h2>标准显示(附加序号)</h2>
                <div ng-repeat="animal in animals">
                    <p>{{$index}} : {{animal}}</p>
                </div>
            </div>

            <div class="bg-primary">
                <h2>只显示数组中第一个元素</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$first">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-warning">
                <h2>去除第一个元素及最后一个元素</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$middle">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-danger">
                <h2>只显示数组中最后一个元素</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$last">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-primary">
                <h2>只显示数组中第偶数个元素</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$even">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-success">
                <h2>只显示数组中第奇数个元素</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$odd">{{$index}} : {{animal}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在这段代码中,{{$index}}表示数组的序号,从0开始。ng-show属性用于指定与数组显示相关的设置。根据下述特殊变量可以指定数组的显示内容:

  • $first:获取数组中第一个元素
  • $middle:获取数组中除第一个及最后一个之外的其他所有元素
  • $last:获取数组中最后一个元素
  • $even:获取数组中第偶数个元素(从第0个开始)
  • $odd:获取数组中第奇数个元素

控制数组是否显示

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
//代码略
</script>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div ng-controller="TestCtrl">
            <div class="bg-primary">
            <input type="checkbox" ng-model="checked">选取时显示</input>
                <div ng-repeat="animal in animals">
                    <span ng-show="checked">{{$index}} : {{animal}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ng-show属性值也可以为true或false。在本例中,通过ng-model属性将复选框的checked属性值(选取时为true,非选取时为false)将ng-show属性值绑定在一起。