AngularJS双向数据绑定案例

来源：互联网发布：盛势网络剧视频第五集编辑：程序博客网时间：2024/05/17 02:38

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.js2.编写页面布局，因为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>

阅读全文

1 0