欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

​ng-model与ng-value的区别

ng-model与ng-value的区别

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_30638831/article/details/76418152
首先,先了解这两个属性是什么作用,ng-model是数据的双向绑定,ng-value官网上的解释:AngularJS expression, whose value will be bound to the value attribute and value property of the element. It is especially useful for dynamically generated lists using ngRepeat.意思就是 指令用于设置 input 或 select 元素的 value 属性。



  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
  7. <script>
  8. angular.module("myApp",[]).controller("myControl",["$scope",function($scope){
  9. $scope.name = "哈哈哈";
  10. $scope.name1 = "大话西游2";
  11. $scope.fun = function(){
  12. alert($scope.name1);
  13. }
  14. $scope.fun = function(){
  15. var val = document.getElementById("val");
  16. //  console.log("哈哈哈哈:" + val.value);
  17. alert(val.value);
  18. }
  19. }]);
  20. </script>
  21. <!--
  22.          在input中的值,若ng-model与ng-value都存在的话,则ng-value中值会被覆盖,显示ng-model中的值
  23.    -->
  24. </head>
  25. <body >
  26. <div ng-app="myApp" ng-controller="myControl">
  27. <input type="text"    id="val" ng-model="name" ng-value="name1" ng-blur="fun()"  >
  28. {{name}}
  29. </div>
  30. </body>
  31. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
  7. <script>
  8. angular.module('valueExample', [])
  9. .controller('ExampleController', ['$scope', function($scope) {
  10. $scope.names = ['pizza', 'unicorns', 'robots'];
  11. $scope.my = { favorite: 'unicorns' };
  12. }]);
  13. </script>
  14. </head>
  15. <body ng-app="valueExample" >
  16. <!--
  17.        ng-repeat中使用value
  18.    -->
  19. <form ng-controller="ExampleController">
  20. <h2>Which is your favorite?</h2>
  21. <label ng-repeat="name in names" for="{{name}}">
  22. {{name}}
  23. <input type="radio"
  24. ng-model="my.favorite"
  25. ng-value="name"
  26. id="{{name}}"
  27. name="favorite">
  28. </label>
  29. <div>You chose {{my.favorite}}</div>
  30. </form>
  31. </body>
  32. </html>


来自 https://blog.csdn.net/qq_30638831/article/details/76418152

普通分类: