AngularJS(作用域，控制器，过滤器)

最新推荐文章于 2024-06-16 18:09:06 发布

Ary-若嫣

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量88

点赞数

分类专栏： AngularJS 文章标签： javascript angularjs js

本文链接：https://blog.csdn.net/weixin_39437108/article/details/103875484

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "Runoob";
        $scope.sayHello = function() {
            $scope.greeting = 'Hello ' + $scope.name + '!';
            console.log("aaaaa")
        };
    });
</script>
</body>

当HTML DOM 中有多个作用域，你就需要知道你使用的 scope 对应的作用域是哪一个。
当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象，每个

元素可以访问当前的重复对象，这里对应的是一个字符串，并使用变量 x 表示。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names=["aa","bb","cc"]
    });
</script>
</body>

根作用域 ——$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
将 $rootScope 作为参数传递，可在应用中使

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastname}} 家族成员:</h1>
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}</li>
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname = "Refsnesssss";
    });
</script>
</body>

AngularJS 控制器

<div ng-app="myApp" ng-controller="myCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。
ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase:格式化字符串为小写。
uppercase:格式化字符串为大写。
orderBy:根据某个表达式排列数组。

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

Ary-若嫣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(作用域，控制器，过滤器)

AngularJS Scope(作用域)Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。<body><div ng-app="myApp" ng-control...
复制链接

扫一扫