AngularJS双向数据绑定案例

最新推荐文章于 2020-04-21 03:38:05 发布

happy_meng

最新推荐文章于 2020-04-21 03:38:05 发布

阅读量361

点赞数 1

分类专栏： angularjs 文章标签： angularjs

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS双向数据绑定案例

angularJS常用属性

ng-app：可在任何元素上使用，代表angular应用的作用域
ng-model：指定模型
ng-controller：指定控制器
ng-bind或者{{}}：进行属性取值，用于显示

什么是双向数据绑定

更新模型，视图自动更新，更新视图，模型自动更新

步骤：
    1.导入AngularJS的相关jar包
        angular.js
        angular.min.js(基本功能，只需要导入这个jar包)
        从angularJS1.2版本后，路由功能被单独分离出来，如果要使用路由功能需要导入下面这个jar包（此案例可不引）
        angular-route.js
        angular-route.min.js
        {上面两个jar均都有min版和没有min版，区别在于，min版删除了代码中的空格等空字符，在磁盘上占据的内存较没有min版的要小，如果只是开发，只需要导入min版即可，如果要看源代码，最好导没有min版}
    2.创建一个新的html页面
    3.在界面导入AngularJs的核心包
        <script type="text/javascript" src="../js/angular.min.js"></script>
    4.在<body>标签中完成以下代码编写
        <!--ng-app 是angular编程入口，是模块作用域-->
        <div ng-app>
            <!--ng-model模型作用-->
            <input type="text" ng-model="myModel" name="name" />
            <div>
                <!--{{}} 的使用相当于ng-bind-->
                hello, {{myModel}}
            </div>
        </div>
    5.运行程序，可获得这样的效果
   
   


    
        6.在文本框中输入数据，可获得如下结果
     
     




      
      这里特别注意几个问题：




      
      ng-app后面没有属性，不要写成ng-app=”“，如果写成这样，双向数据绑定的效果就无法实现
{{}}中的数据，是ng-model后面写的属性名
ng-app是angularJS的入口，所以div必须在标有ng-app的标签内，如果写出去了,或者没有写ng-app，就无法实现功能 

如下列这种方式就无法实现效果：




      
      <body>
    <!--ng-app 是angular编程入口，是模块作用域-->
    <div ng-app>
        <!--ng-model模型作用-->
        <input type="text" ng-model="myModel" name="name" />
    </div>
    <div>
        <!--{{}} 的使用相当于ng-bind-->
        hello, {{myModel}}
    </div>
</body>
       
       AngularJS基于模块化的MVC案例




        
        必须在ng-app后面给上属性名，并且要给定控制器ng-controller=”控制器名称” 
设置完成之后，可以在script标签中，通过angular.module()初始化模块
之后可以定义控制器——






        
        模块名.controller("控制器名",["$scope..."</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope) {}])或模块名.controller("控制器名",function($scope) {})
         
         1




        
        以下是实例




        
        <body>
    <!--ng-app 定义一个模块-->
    <div ng-app="myApp" ng-controller="ctrl">
        <div>
            <!--ng-model模型作用-->
            <input type="text" ng-model="myModel" name="name" />
        </div>
        <div>
            <!--{{}} 的使用相当于ng-bind-->
            hello, {{myModel}}
        </div>
    </div>

    <script type="text/javascript">
        // 初始化myApp模块
        var model = angular.module("myApp",[]);

        // 定义模块的控制器
        // 依赖注入，$scope作用域对象，操作当前作用域视图
        model.controller("ctrl",["$scope"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope) {
            // 对模型进行初始化_$scope.模型名称——与上面ng-model后设置的参数对应
            $scope.myModel = "基于模块化的MVC案例";
        }]);
    </script>
</body>
         
         实现效果： 




          
          AngularJS事件绑定案例




          
          <!--ng-app 定义一个模块-->
<div ng-app="myApp" ng-controller="ctrl">
    <div>
        <!--ng-model模型作用-->
        <input type="text" ng-model="myModel" name="name" />

        <!--清空输入框的点击事件-->
        <input type="button" name="but" id="butt" value="清空输入框" ng-click="clearVal()" />
    </div>
    <div>
        <!--{{}} 的使用相当于ng-bind-->
        hello, {{myModel}}
    </div>
</div>
<script type="text/javascript">
    // 初始化模块_第一个参数ng-app后的参数即模块名，第二个参数可不写
    var model = angular.module("myApp",[]);

    // 定义控制器_这里第一个参数是ng-controller后的参数即控制器名称，第二个参数是依赖注入
    model.controller("ctrl", function($scope) {
        // 对模型进行初始化
        $scope.myModel = "案例";
        // 对clearVal进行事件绑定
        $scope.clearVal = function() {
            // 对模型进行空初始化
            $scope.myModel = "";
        }
    });
</script>
           
           效果如下： 

 

点击清空输入框按钮后： 




            
            AngularJS集合数据遍历显示案例




            
            循环遍历：ng-repeat，需要对谁循环就在哪个元素上添加这个属性




            
            <body ng-app="myApp" ng-controller="ctrl">
    <table border="1" cellspacing="1" cellpadding="1">
        <tr>
            <th>序号</th>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>价格</th>
        </tr>
        <!--这个product in products说明循环自哪个集合-->
        <tr ng-repeat="product in products">
            <!--这是内置的一个循环索引，从0开始-->
            <td>{{$index + 1}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
        </tr>
    </table>

    <script type="text/javascript">
        // 初始化模块
        var model = angular.module("myApp",[]);

        // 定义控制器
        model.controller("ctrl",function($scope) {
            <!--设置集合，这个products需要与上面in后面的参数名相同-->
            $scope.products = [
                {
                    id : 1001,
                    name : "电冰箱",
                    price : 3999
                }, {
                    id : 1002,
                    name : "电视机",
                    price : 5000
                }
            ];
        });
    </script>
</body>
             
             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


            
            效果如下: 




            
            AngularJS路由




            
            什么是AngularJS的路由 

是协助搭建单页面工程的开源前端框架，通过MVC模式使得开发与测试变得更容易 

AngularJS的路由案例






            
            1.导入AngularJS的相关jar包
    angular.js
    angular.min.js(基本功能，只需要导入这个jar包)
    从angularJS1.2版本后，路由功能被单独分离出来，如果要使用路由功能需要导入下面这个jar包（此案例需要使用路由，所以需要引入这个jar包）
    angular-route.js
    angular-route.min.js
2.编写页面布局，因为angularJS路由是基于Ajax方式，所以将angularJS加载变化部分div,指定ng-view(表示切换不同路由页面)
3.编写路由配置
    在定义模块的时候需要将ngRoute模块当作依赖加载进去：angular.module("ng-app后跟得属性名", ["ngRoute"]);

实现代码：
<body ng-app="myApp">
    <div>
        <h1>head</h1>
        <!--在页面内部通过#/页面名称访问其他页面-->
        <a href="#/JavaEE">JavaEE</a>
        <a href="#/Android">Android</a>
        <a href="#/Ios">Ios</a>
    </div>
    <div ng-view>

    </div>
    <div>
        <h1>foot</h1>
    </div>
    <script type="text/javascript">
        // 初始化模块——这条语句说明，当前的模块以来ngRoute模块
        var myApp = angular.module("myApp", ["ngRoute"]);

        // 配置模块的路由
        myApp.config(function($routeProvider) {
            $routeProvider
            .when("/JavaEE", {
                // 模板跳转
                templateUrl : "5_JavaEE.html"
            }).when("/Ios", {
                // 模板跳转
                templateUrl : "5_Ios.html"
            }).when("/Android", {
                // 模板跳转
                templateUrl : "5_Android.html"
            })
            // 如果没有符合的路径，则默认跳转到JavaEE的界面
            .otherwise({
                redirectTo : "/JavaEE"
            });
        })
    </script>
</body>
             
             实现结果如下： 

 

点击第二行标签，第三行的数据就会相应的改变

            <link rel="stylesheet" href="http://csdnimg.cn/release/phoenix/production/markdown_views-d4dade9c33.css">
                </div>

happy_meng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录