AngularJs-数据绑定

前言：

　　我们在做前端工作最重要的是把数据能展示给用户看，展示的时候就是把数据绑定给某个元素。

1，简单的数据绑定

html:

<!DOCTYPE html>

<html ng-app="MyModule">

<head>

    <meta charset="utf-8">

    <title>数据绑定</title>

</head>

<body>

    <div ng-controller="myCtl">

        <p>{{greeting.text}},Angular</p>

    </div>

</body>

<script src="js/angular-1.3.0.js"></script>

<script src="js/dataBid.js"></script>

</html>

在上面描述中，{{}} 就是我们实现数据绑定的一个方法，下面把数据给 $scope就可以显示出来了

var myModule = angular.module('MyModule',[]);

myModule.controller('myCtl',function($scope){

    $scope.greeting={

        text:"hello"

    }

})

看效果图

但是，这里有一个问题，当你写完代码按住 F5 狂刷新页面的时候，会发现在数据没有绑定到页面元素的时候，显示的是我们的代码{{greeting.text}}

这不是我们想要的结果，我们可以使用angularjs提供的第二种方法来显示数据绑定，使用 ng-bind属性

    <div ng-controller="myCtl">

        <p><span ng-bind="greeting.text"></span>,Angular</p>

    </div>

这样显示的时候就不会有代码显示出来了，接着问题来了（要问挖掘机哪家强？），开个玩笑，呵呵，其实差不多，你是你有两种方式绑定，那我们该用哪一种比较好呢？其实，这是要分场景的，使用 ng-bind 是在主html里比较好，而用到 {{}}呢，是放在模板中比较好。

2，双向数据绑定

　　什么是双向数据绑定？简单的说就是，数据从后端（指js逻辑这块）展现到前端，从前端也能修改后端的数据。最经典的例子就是form表单提交了。

<!DOCTYPE html>

<html ng-app="MyModule">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>双向数据绑定</title>

</head>

<body>

    <div class="row">

        <div class="col-md-5">

            <form action="" role="form" class="form-horizontal" ng-controller="formCtl">

                <div class="form-group">

                    <label for="" class="col-md-2 contorl-label">登录名：</label>

                    <div class="col-md-10">

                        <input type="text" class="form-control" placeholder="请输入登录名/邮箱/手机号" ng-model="userInfo.loginUser">

                    </div>

                </div>

                <div class="form-group">

                    <label for="" class="col-md-2 contorl-label">密码：</label>

                    <div class="col-md-10"><input type="text" class="form-control" placeholder="请输入密码" ng-model="userInfo.pwd"></div>

                </div>

                <div class="form-group">

                    <!-- <label for="" class="col-md-2 contorl-label"></label> -->

                    <div class="col-md-10 col-md-offset-2">

                        <div class="checkbox">

                            <label >

                                <input type="checkbox" ng-model="userInfo.checked">

                                自动登录

                            </label>

                        </div>

                    </div>

                </div>

                <div class="form-group">

                    <!-- <label for="" class="col-md-2 contorl-label"></label> -->

                    <div class="col-md-10 col-md-offset-2">

                        <button id="btnGetFormVal" ng-click="getFormVal()" class="btn btn-primary">获取Form表单的值</button>

                        <!-- <input type="text" class="form-control" placeholder="" ng-modle=""> -->

                        <button class="btn btn-default" ng-click="setFormVal()">设置Form表单的值</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

    <script src="js/angular-1.3.0.js"></script>

    <script src="js/doubleDataBid.js"></script>

</body>

</html>

看这个代码，我们可以用 ng-model来把后端的数据绑定到前面的 input框内。同时使用 ng-click来调用 $scope所定义的方法，来获取和修改form表单的值

var myModule = angular.module('MyModule',[]);

myModule.controller('formCtl',function($scope){

    $scope.userInfo = {

        loginUser:"duxg",

        pwd:'12345678',

        checked:true

    }

    $scope.getFormVal=function(){

        console.log($scope.userInfo);

    }

    $scope.setFormVal=function(){

        $scope.userInfo={

            loginUser:"nijie",

            pwd:"1212",

            checked:false

        }

    }

})

在此说明，ng-bind适用于标签元素，而ng-model适用于文本、选择等元素。

3，总结：

　　数据绑定这块很简单，我们自己就很常用，就举一个简单的例子吧，我们常用的多条件查询数据，那我们可以把要查询的条件放到一个集合中去，等用户改变那个条件，我们就去修改集合中对应的键值对就好了，然后去调用ajax。是不是一样的道理？