• /AngularJs 控制器


    AngularJs控制器控制应用程序(的数据).

    AngularJs控制器是常规的JavaScript对象,由标准的JavaScript对象的构造函数创建

    ng-controller指令定义了应用程序控制器.

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

    应用解析:

    AngularJs应用程序由ng-app定义,应用程序在<div>内运行。

    ng-controller="myCtrl"属性是一个AngularJS的一个指令,用来定义一个控制器。

    AngularJS使用$scope对象来调用控制器。

    在AngularJs中,$scope是一个应用对象(属于应用变量和函数).

    控制器的$scope(相当于作用域、控制范围)用来保存AngularJs Model(模型)

    控制器在作用域中创建了两个属性(firstName和lastName)

    ng-model指令绑定输入域到控制器的属性(firstName和lastName).

    控制器方法:

    <div ng-app="myApp" ng-controller="myCtrl">
            <label for="">名:<input type="text" ng-model="firstName"></label>
            <label for="">姓:<input type="text" ng-model="lastName"></label>
            <br />
            姓名:{{fullName()}
        </div>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.firstName = "hehe";
                $scope.lastName = "老街";
                $scope.fullName = function () {
                    return $scope.firstName + "" + $scope.lastName;
                }
            })
        </script>

    外部文件中的控制器

      <div ng-app="myApp" ng-controller="namesCtrl">
            <ul>
                <li ng-repeat="x in names">
                    {{x.name + "," +x.country}}
                </li>
            </ul>
        </div>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="namesController.js"></script>
    angular.module("myApp",[]).controller("namesCtrl",function($scope){
        $scope.names = [
            {name:"Jani",country:"Norway"},
            {name:"Hege",country:"Sweden"},
            {name:"Kai",country:"Denmark"}
        ];
    })
  • 相关阅读:
    cppPrimer学习18th
    cppPrimer学习17th
    cppPrimer学习15th
    常用网站记录
    cppPrimer学习16th
    关于nfs内网穿透frp/nps的问题记录
    unp[unix 网络环境编程]学习 vscode环境搭建
    cppPrimer学习14th
    cppPrimer学习14th
    cppPrimer学习13th
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/6808542.html
Copyright © 2020-2023  润新知