ng-model、ng-bind、ng-value使用区别
2017-06-18 23:23
555 查看
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 lang="en" 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>
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 lang="en" 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJs中模块的依赖注入，ng-model、ng-bind和{{}}的区别，路由机制
- ionic 自定义指令无法获取绑定值，ngModelController.$viewValue无法使用
- ng-model与ng-value的区别
- ng-model，ng-value，ng-bind，{{}}----angularJS数据绑定
- ng-bind、ng-value和ng-model
- bindParam和bindValue的区别以及在Yii2中的使用详解
- angular中ng-bind和ng-model的区别
- AngularJs-ng-app -ng-model-ng-bind指令讲解和使用
- angular-js的ng-bind与ng-model区别
- ng-model和ng-bind区别
- Angular中ng-bind和ng-model的区别实例详解
- Angular中的ng-bind和ng-model区别
- bindParam和bindValue的区别以及在Yii2中的使用
- pdo中使用bindParam和bindValue的区别
- Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
- Vue.js中v-bind v-model的使用和区别
- ng-bind 与ng-model区别
- AngularJs中模块的依赖注入，ng-model、ng-bind和{{}}的区别，路由机制。
- angular中ng-bind和ng-model的区别
- ng-bind 与ng-model区别