zoukankan      html  css  js  c++  java
  • AngularJS第二课(指令,作用域,控制器)

    指令

    实列:
    
    <div ng-init="firstName='pp'">
        name:<input type="text" ng-model="firstName"></input>
        您输入的是:{{firstName}}
    </div>
    ng-init:作用是初始化数据
    ng-model:将把输入域(也就是input)的值,绑定到应用程序(也就是{{firstName}})
    

    no-repeat实现数组

    <div ng-init="names=[1,2,3,4]">
      <ul>
        <li ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>

    angularJS的MVC实现

    实例:

    //指定应用程序为myApp,以及控制器myCtrl
    <div ng-app="myApp" ng-controller="myCtrl">
    
    <h1>{{carname}}</h1>
    
    </div>
    //实现V(视图)与C(控制器:就是操纵的js代码)分离
    <script>
    //声明一个采用angular的M(模型)
    var app = angular.module('myApp', []);
    //函数中传递$scope为参数的对象
    app.controller('myCtrl', function($scope) {
        $scope.carname = "Volvo";
    });
    </script>

    MVC:M(当前视图中可用的数据),V(视图,HTML),C(js代码,用来添加或者修改属性等操作,所以叫做控制器)

    scope:带有属性和方法的模型,当你修改了HTML的部分,模型和控制器的部分也会自动更新。

    scope的作用范围

    实列:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    <h1>姓氏为 {{firstname}} 家族成员:</h1>
    
    <ul>
        <li ng-repeat="x in names"> {{firstname}}{{x}}</li>
    </ul>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    
    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["一", "二", "三"];
        $rootScope.lastname = "张";
    });
    </script>
    </body>
    </html>

    结果为张一,张二,张三

    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    蓝桥杯程序设计 剪格子
    sql中 1<> 1=1的用处
    form表单的6种提交方式
    js中添加监听,判断是什么事件
    angular iFrame加载资源问题
    报表往子报表里传入list
    struts 文件上传
    获取运行时的泛型类型
    Dao层抽取BaseDao
    SSH整合总结
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305968.html
Copyright © 2011-2022 走看看