天天看点

ng-model、ng-bind、ng-value使用区别

1、ng-model : 是双向数据绑定,改变页面上ng-model模块的值,也会对$scope中对应的值起作用;

      ng-bind : 是单向数据绑定,页面上改变并不会对$scope中内容起到作用;

      ng-value : 作用类似于 html中value的作用;

2、ng-model : 可以定义在<select> <input>等标签内,显示值

      ng-bind : 是覆盖html元素的内容,所以放在<input>中不会显示值,查看覆盖后的代码是<input>xxxx</input>,所以不会显示值,

      可以放在<span>等标签中

3、下边的一段代码可以看到ng-model与ng-value结合使用的效果,类比于原生radio使用方法,ng-model类似于name的作用,ng-value是赋值给ng-model

<!doctype html>
<html  ng-app="hd">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../org/angular.min.js"></script>
</head>
<style>
    .ng-cloak{
        display: none;
    }
</style>
<body ng-cloak class="ng-cloak">
    <div ng-controller="list">
        <input type="text" ng-model="changeName1">{{changeName1}}
        <br>
        <span ng-bind="changeName2"></span>
        <br>
        <input type="text" ng-value="changeName1">
        <hr>
       <span>网站控制:</span>
        <input type="radio" ng-model="status" ng-value="1">开启
        <input type="radio" ng-model="status" ng-value="0">关闭
        <br>
        {{status}}
        <br>
        <texta ng-show="status==0">
            展示关闭的内容
        </texta>
        <br>
        <input type="radio" value="1" name="sex">男
        <input type="radio" value="0" name="sex">女
    </div>

    <script>
        var hd = angular.module('hd',[]);
        hd.controller('list',['$scope',function ($scope) {
            $scope.changeName1 = "model";
            $scope.changeName2 = "bind";
            $scope.status=1;
        }]);
    </script>

</body>
</html>