Note05--双向数据绑定

最新推荐文章于 2023-12-21 17:54:05 发布

David_Hernandez

最新推荐文章于 2023-12-21 17:54:05 发布

阅读量423

点赞数

分类专栏： AngularJS 文章标签：双向数据绑定

本文链接：https://blog.csdn.net/kisslotus/article/details/54704431

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 双向指的是：数据模型--》视图；视图--》数据模型；
2. 绑定的方式：
    a. Ng-bind 或者 双括号；
        i. 双括号方式，在网络不好的情况下，会出现双括号显示在页面中；
        ii. 使用ng-bind方式而不是{{  ** }}方式绑定值；
    b. 两者使用的原则：
        i. 在首页index.html中，使用ng-bind方式，之后使用双括号方式就可以避免这种问题；原因是一般在首页上加载angular库，之后的页面都全部由angular管理，这样之后双括号就OK了；

3. 为什么需要双向数据绑定？
    a. 使用场景：Form表单；
    b. e.g.
        i. Form.html

<!doctype html>
<html ng-app="UserInfoModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    <script src="js/angular-1.3.0.js"></script>
    <script src="Form.js"></script>
</head>

<body>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">双向数据绑定</div>
        </div>
        <div class="panel-body">
            <div class="row">
                <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="推荐使用126邮箱" 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" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
                                <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
                                <button class="btn btn-default" ng-click="resetForm()">重置表单</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

        ii. Form.js

var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', ['$scope',
    function($scope) {
        $scope.userInfo = {
            email: "253445528@qq.com",
            password: "253445528",
            autoLogin: true
        };
        $scope.getFormData = function() {
            console.log($scope.userInfo);
        };
        $scope.setFormData = function() {
            $scope.userInfo = {
                email: 'damoqiongqiu@126.com',
                password: 'damoqiongqiu',
                autoLogin: false
            }
        };
        $scope.resetForm = function() {
            $scope.userInfo = {
                email: "253445528@qq.com",
                password: "253445528",
                autoLogin: true
            };
        }
    }
])

    c. 一个双向数据绑定常用的例子：通过绑定的值改变样式或者其他
        i. CSS1.html

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CSS1.css">
</head>

<body>
    <div ng-controller="CSSCtrl">
        <p class="text-{{color}}">测试CSS样式</p>
        <button class="btn btn-default" ng-click="setGreen()">绿色</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="CSS1.js"></script>

</html>

        ii. CSS1.js

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
    function($scope) {
        $scope.color = "red";
        $scope.setGreen = function() {
            $scope.color = "green";
        }
    }
])

        iii. CSS1.css

.text-red {
    background-color: #ff0000;
}
.text-green {
    background-color: #00ff00;
}

4. Ng-class： 可以接受表达式；
    a. NgClass.html

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="NgClass.css">
</head>

<body>
    <div ng-controller='HeaderController'>
        <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
        <button ng-click='showError()'>Simulate Error</button>
        <button ng-click='showWarning()'>Simulate Warning</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgClass.js"></script>

</html>

    b. NgClass.js

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('HeaderController', ['$scope',
    function($scope) {
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.showError = function() {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function() {
            $scope.messageText = 'Just a warning. Please carry on.';
            $scope.isWarning = true;
            $scope.isError = false;
        };
    }
])

    c. NgClass.css

.error {
  background-color: red;
}
.warning {
    background-color: yellow;
}

5. Ng-show 和 ng-hide控制显示和隐藏
    a. NgShow.html

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div ng-controller='DeathrayMenuController'>
        <button ng-click='toggleMenu()'>Toggle Menu</button>
        <ul ng-show='menuState.show'>
            <li ng-click='stun()'>Stun</li>
            <li ng-click='disintegrate()'>Disintegrate</li>
            <li ng-click='erase()'>Erase from history</li>
        </ul>
    <div/>
</body>

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

</html>

    b. NgShow.js

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('DeathrayMenuController', ['$scope',
    function($scope) {
        $scope.menuState={show:false};
        $scope.toggleMenu = function() {
            $scope.menuState.show = !$scope.menuState.show;
        };
    }
])

6. Ng-animate
    a. http://css.doyoe.com
    b. E.g.
        i. Index.html

<!doctype html>
<html ng-app="bookStoreApp">

<head>
    <meta charset="UTF-8">
    <title>BookStore</title>
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.theme.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
</head>

<body>
    <div class="page {{pageClass}}" ng-view>
    </div>
</body>

</html>

        ii. Index.css

.page {
    bottom:0;
    padding-top:200px;
    position:absolute;
    text-align:center;
    top:0;
    width:100%;
}
.page h1 {
    font-size:60px;
}
.page a {
    margin-top:50px;
}
.hello {
    background:#00D0BC;
    color:#FFFFFF;
}
.list{
    background:#E59400;
    color:#FFFFFF;
}
@keyframes rotateFall {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(10deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: rotateZ(17deg);
    }
    60% {
        transform: rotateZ(16deg);
    }
    100% {
        transform: translateY(100%) rotateZ(17deg);
    }
}
@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
    }
}
@keyframes rotateOutNewspaper {
    to {
        transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}
@keyframes scaleUp {
    from {
        opacity: 0.3;
        -webkit-transform: scale(0.8);
    }
}
@keyframes slideInRight {
    from {
        transform:translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes slideInUp {
    from {
        transform:translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.ng-enter {
    z-index: 8888;
}
.ng-leave {
    z-index: 9999;
}
.hello.ng-enter {
    animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
    transform-origin: 0% 0%;
    animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
    animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
    animation:slideOutLeft 0.5s both ease-in;
}

        iii. App.js

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list', {
        templateUrl: 'tpls/bookList.html',
        controller: 'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});

        iv. Controllers.js

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

bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
        $scope.pageClass="hello";
    }
]);

bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books = [{
            title: "《Ext江湖》",
            author: "大漠穷秋"
        }, {
            title: "《ActionScript游戏设计基础（第二版）》",
            author: "大漠穷秋"
        }, {
            title: "《用AngularJS开发下一代WEB应用》",
            author: "大漠穷秋"
        }];
        $scope.pageClass="list";
    }
]);

/**
 * 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
 */

        v. Services.js

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

bookStoreServices.service('bookStoreService_1', ['$scope',
    function($scope) {}
]);

bookStoreServices.service('bookStoreService_2', ['$scope',
    function($scope) {}
]);
vi. Directive.js
var bookStoreDirectives = angular.module('bookStoreDirectives', []);

bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
    function($scope) {}
]);

bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
    function($scope) {}
]);
vii. Filters.js
var bookStoreFilters = angular.module('bookStoreFilters', []);

bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
    function($scope) {}
]);

bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
    function($scope) {}
]);

        viii. bookList.html

<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
    </li>
</ul>

        ix. Hello.html

<p>{{greeting.text}},Angular</p>
<p><a href="#/list">下一页</a></p>

David_Hernandez

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Note05--双向数据绑定

1. 双向指的是：数据模型--》视图；视图--》数据模型；2. 绑定的方式： a. Ng-bind 或者双括号； i. 双括号方式，在网络不好的情况下，会出现双括号显示在页面中； ii. 使用ng-bind方式而不是{{ ** }}方式绑定值； b. 两者使用的原则： i. 在首页index.html中，使用ng-bind方式，之
复制链接

扫一扫