AngularJs-03-数据的双向绑定

最新推荐文章于 2024-08-02 14:21:03 发布

weixin_33724059

最新推荐文章于 2024-08-02 14:21:03 发布

阅读量57

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/551302

版权

<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
    <title>AngularJs-数据的双向绑定</title>
</head>
<body ng-init="username='bilaisheng';address='北京';">
    
    <h3>for TestController</h3>
    <ul ng-controller="TestController">
        <li ng-repeat="room in classroom">
            {{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
        </li>
    </ul>
    
    <h3>for TestController2</h3>
    <ul ng-controller="TestController2">
        <li ng-repeat="room in classroom">
            {{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
        </li>
    </ul>
    
    <h3>for ng-bind</h3>
    <div>用户名:<input type="text" ng-model="username" /></div>
    <div>你输入的用户名是：{{username}}</div>
    <div>你输入的用户名是：<span ng-bind="username"></span></div>
    <div>你输入的用户名是：<span class="ng-bind:username"></span></div>
    
    <script type="text/javascript">
        
        // 初始化一个angularjs的代理对象
        var app = angular.module("myapp",[]);
        // for TestController        
        app.controller("TestController",function($scope,$rootScope,$log){
            $scope.classroom=[
                {name:"张三",age:20},
                {name:"李四",age:21},
                {name:"王五",age:22},
                {name:"赵六",age:23}
            ];
            $scope.username="李七";
        });
        
        // for TestController2
        app.controller("TestController2",function($scope,$rootScope,$log){
            $scope.classroom=[
                {name:"张三",age:20},
                {name:"李四",age:21},
                {name:"王五",age:22},
                {name:"赵六",age:23}
            ];
            $scope.username="李七";
        });
        
        
        /**
         * ng-init : 初始化数据
         * ng-repeat: 迭代数组和对象,语法
         * ng-repeat="变量 in 对象/数组" -- 循环
         * eg : <div ng-repeat"变量 in 对象/数组"></div>
         * 
         * AngularJs双向数据绑定: 能够大幅度减少对dom元素的操作.
         */
    </script>
    
</body>
</html>

weixin_33724059

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs-03-数据的双向绑定

<!DOCTYPE html><html lang="zh" ng-app="myapp"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫