angularjs双向数据绑定

简单双向绑定

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="js/vendor/angular-1.5.8.min.js"><//script>
    <script src="webjars/angular-route/1.5.8/angular-route.js"><//script>
    <title>Document</title>
</head>
<body ng-app="app" ng-controller="HelloCtrl">
<span ng-bind="greeting.text"></span>
{{greeting.text}}
</body>

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

    app.controller("HelloCtrl", function ($scope) {
        $scope.greeting = {
            text: 'hello'
        };
    });
<//script>
</html>

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

基于表单的数据绑定

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!--css-->
    <link rel="stylesheet" href="webjars/bootstrap/3.3.6/dist/css/bootstrap.css"/>
    <!--js-->
    <script src="js/vendor/angular-1.5.8.min.js"><//script>
    <script src="webjars/angular-route/1.5.8/angular-route.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", ['ngRoute']);

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

        $scope.getFormData = function () {
            console.log($scope.userInfo);
        };

        $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">
    <!--css-->
    <link rel="stylesheet" href="webjars/bootstrap/3.3.6/dist/css/bootstrap.css"/>
    <!--js-->
    <script src="js/vendor/angular-1.5.8.min.js"><//script>
    <script src="webjars/angular-route/1.5.8/angular-route.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", ['ngRoute']);

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





发表于: 2月前   最后更新时间: 1月前   游览量:152
上一条: angularjs的路由
下一条: angularjs之ng-class

评论…


  • 评论…
    • in this conversation