AngularJs-数据绑定

浏览数：34 / 时间：2015年06月09日

前言：

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

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>

View Code

看这个代码，我们可以用 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
        }
    }
})