AngularJS基础二($scope,过滤器)

最新推荐文章于 2025-08-18 20:17:18 发布

原创最新推荐文章于 2025-08-18 20:17:18 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #javascript

AngularJS 专栏收录该内容

3 篇文章

订阅专栏

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象

AngularJS 过滤器可以使用一个管道字符(|)添加到表达式和指令中

<span style="font-size:18px;"><!doctype html>
<html ng-app>
    <head>
    <title></title>
    <link href="./bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="./angular.min.js"></script>
    </head>
    <body>
    <div ng-controller="personController">

    名： <input type="text" ng-model="person.firstName"><br>
    姓： <input type="text" ng-model="person.lastName"><br>
    <br>
    姓名： {{person.firstName + " " + person.lastName}}
    <br>
    姓名： {{person.fullName()}}
    <br>
    姓名： {{fullName2()}}
    <br>
    <ul>
        <!-- 过滤器(| orderBy 排序) -->
        <!-- (| filter 从数组项中选择一个子集) -->
        <!-- (| uppercase 格式化字符串为大写) -->
        <li ng-repeat="x in names | filter:name | orderBy:'country'">
            {{ (x.name | lowercase) + ', ' + x.country | uppercase}}
        </li>
    </ul>
    </div>
    <script type="text/javascript">
    function personController($scope) {
        $scope.person = {
            firstName: "John",
            lastName: "Doe",
            //控制器也可以把函数作为对象属性
            fullName: function() {
                var x;
                x = $scope.person;
                return x.firstName + " " + x.lastName;
            }
        };
        //控制器也可以带有方法
        $scope.fullName2 = function() {
            var x;
            x = $scope.person;
            return x.firstName + " " + x.lastName;
        };
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    }
    </script>
    </body>
</html></span>