AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令_在angularjs中,mvvm中哪两个部分实现了双向绑定

作者：你好赵伟 | 2024-07-24 11:48:24

踩

在angularjs中,mvvm中哪两个部分实现了双向绑定

一、什么是双向数据绑定？

AngularJs有一个很强大的功能就是双向数据绑定，即MVVM，什么是双向数据绑定呢？

在一般的应用当中，后端给前端返回数据，前端数据发生改变，如果不做表单或者是ajax数据提交，这些数据是不会及时返回给后端的，也就是单向数据绑定，而AngularJs能做到双向数据绑定，数据从模型->视图->视图->模型，这样一个过程，看下面这段代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type="text/css">
            .ng-cloak{display:none;}
        </style>
    </head>
    <body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
        <input type="text" ng-model='name' />
        <h1>{{name}}</h1>
    </body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.name= 'K`illCode';
    }]);
</script>

当你手动改变input中的值的时候，发现h1标签里的文字也会发生改变，这就是双向数据绑定。

ng-model结合ng-value实现的双向数据绑定小实例，这两个指令只能用于input表单：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type="text/css">
            .ng-cloak{display:none;}
        </style>
    </head>
    <body ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
        <p>名称：<input type="text" ng-model="goods.data.name" /></p>
        <p>价格：<input type="text" ng-model="goods.data.price" /></p>
        <p>数量：<input type="text" ng-model="goods.data.num" /></p>
        <p>总价：<input type="text" ng-value="goods.data.price*goods.data.num" /></p>
    </body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.goods = {
            data : {
                'name' : 'K`illCode的AngularJs学习笔记',
                'price' : '100',
                'num' : 1
            }
        };
    }]);
</script>

二、双向数据绑定在input单选框表单中的应用：

直接用AngularJs实现这个功能，如果单选框status的值是1，说明网站正常运行，提示文字隐藏，如果status的值是0，说明网站出故障，提示文字显示。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type="text/css">
            .ng-cloak{display:none;}
        </style>
    </head>
    <body ng-app="app" ng-controller="ctrl">
        开启：<input type="radio" name="status" ng-model="status" value="1" checked />
        关闭：<input type="radio" name="status" ng-model="status" value="0" />
        {{status}}
        <div ng-show="status==0">
            网站正在维护中，1小时后重新开启！
        </div>
    </body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.status = 1;
    }]);
</script>

ng-show这个指令，如果是true，则所在标签显示，如果是false，则所在标签隐藏。

三、双向数据绑定在input复选框表单中的应用：

比如有玩游戏和看电影两个选项，它们各自被选中之后，各自对应的textarea文本框就显示，否则就隐藏。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type="text/css">
            .ng-cloak{display:none;}
        </style>
    </head>
    <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
        <p>
            <label>游戏：</label>
            <input type="checkbox" ng-model="choose.game" ng-true-value="1" ng-false-value="0" />
        </p>
        <p>
            <label>电影：</label>
            <input type="checkbox" ng-model="choose.movie" ng-true-value="1" ng-false-value="0" />
        </p>
        <textarea ng-show="choose.game==1">玩游戏</textarea>
        <textarea ng-show="choose.movie==1">看电影</textarea>
    </body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.choose = {
            'game' : 0,
            'movie' : 0
        };
        $scope.a = 0;
    }]);
</script>

可以自定义checkbox被选中或取消选中之后的value值，ng-true-value表示选中之后的value值，ng-false-value表示取消选中之后的value值。

四、双向数据绑定在select下拉列表框中的应用：

比如选择某个城市：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type="text/css">
            .ng-cloak{display:none;}
        </style>
    </head>
    <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
        <select ng-options="v.value as v.name for v in data" ng-model="city">
            <option value="">---请选择城市---</option>
        </select>
    </body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        //$scope.city = 'guangzhou';
        $scope.data = [
            {
                'name' : '北京',
                'value' : 'beijing'
            },
            {
                'name' : '上海',
                'value' : 'shanghai'
            },
            {
                'name' : '广州',
                'value' : 'guangzhou'
            }
        ];
    }]);
</script>

 1 指令ng-options就是循环读取data数组中的json数据，v.value作为option的value值，v.name作为option的innerHTML。

默认的option比如请选择城市，一定要有value值，并且value值是空，这样就可以正常显示！

如果通过指令定义了$scope.city = 'shanghai'，并且在select标签内加入了ng-model='city'，那么在默认打开页面的时候，Angular会根据option中与预先定义的city相同的进行比较，然后默认选中那个选项。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/874530