angularjs的控制器

前端之家收集整理的这篇文章主要介绍了angularjs的控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用ng-controller标签

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name" />
            {{name}}
            {{age}}
        </div>
    </div>
    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="./app/index.js"></script>
</body>
</html>

实现类:

var firstController = function ($scope) {
    //申明一个Model,$scope对象叫做作用域
    $scope.name = '张三';
    $scope.age = 20;
}



多个控制器:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app>
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name" />
            <div ng-controller="secondController">
                <input type="text" value="" ng-model="name" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="./app/index.js"></script>
</body>
</html>

实现类:

var firstController = function ($scope) {
    //申明一个Model,$scope对象叫做作用域
    $scope.name = '张三';
    $scope.age = 20;
}

var secondController = function ($scope) {
    $scope.name = '李四';
}
效果图:

原文链接:https://www.f2er.com/angularjs/145982.html

猜你在找的Angularjs相关文章