angularjs双向数据绑定

半兽人 发表于: 2018-09-06   最后更新时间: 2020-07-01 10:08:23  
{{totalSubscript}} 订阅, 3,136 游览

例一、简单双向绑定

花括号方式:{{greeting.text}} <br/>
ng-bind方式:<span ng-bind="greeting.text"></span>

在线运行

注意:如果网络过慢,{{}}会显示出来,可以使用ng-bind,没刷新出来之前进行隐藏。

例二、基于表单的数据绑定

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    <title>Document</title>
</head>

<body ng-app="app">
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">双向数据绑定</div>
    </div>
    <div class="panel-body">
        <div class="low">
            <div class="col-md-12">
                <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
                    <div class="form-group">
                        <label class="col-md-2 control-label">邮箱:</label>
                        <div class="col-md-10">
                            <input type="email" class="form-control" placeholder="输入你的邮箱" ng-model="userInfo.email"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">密码:</label>
                        <div class="col-md-10">
                            <input type="password" class="form-control" ng-model="userInfo.password"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="userInfo.autoLogin"> Remember me</label>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <button type="submit" class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
                            <button type="submit" class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
                            <button type="submit" class="btn btn-default" ng-click="resetFormData()">恢复Form表单的值</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var app = angular.module("app", []);

    app.controller("UserInfoCtrl", function ($scope) {
        $scope.userInfo = {
            email: 'admin@orchome.com',
            password: '000000',
            autoLogin: true
        };

        $scope.getFormData = function () {
            alert($scope.userInfo.email);
        };

        $scope.setFormData = function () {
            $scope.userInfo = {
                email: 'orc@orchome.com',
                password: '000000',
                autoLogin: false
            };
        };
        $scope.resetFormData = function () {
            $scope.userInfo = {
                email: 'admin@orchome.com',
                password: '000000',
                autoLogin: true
            };
        };
    });
</script>
</html>

在线运行

例三、css样式数据绑定

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
<script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    <title>Document</title>
</head>

<body ng-app="app">
<div ng-controller="CSSCtrl">
    <p class="text-{{color}}">测试css模板</p>
    <button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>
</body>

<style>
    .text-red {
        background-color: #ff0000;
    }

    .text-green {
        background-color: #00ff00;
    }
</style>

<script>
    var app = angular.module("app", []);

    app.controller("CSSCtrl", function ($scope) {
        $scope.color = "red";
        $scope.setGreen = function () {
            $scope.color = "green"
        };
    });
</script>
</html>

在线运行

更新于 2020-07-01

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章