ng-model与ng-value的区别

本文通过两个示例介绍了AngularJS中ng-model与ng-value指令的区别及用法。ng-model实现数据的双向绑定,而ng-value则用于设置input或select元素的value属性,尤其适用于动态生成的列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,先了解这两个属性是什么作用,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 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script>
        angular.module("myApp",[]).controller("myControl",["$scope",function($scope){
            $scope.name = "哈哈哈";
            $scope.name1 = "大话西游2";
            $scope.fun = function(){
                alert($scope.name1);
            }



            $scope.fun = function(){
                var val = document.getElementById("val");
                //  console.log("哈哈哈哈:" + val.value);
                alert(val.value);

            }
        }]);
    </script>
    <!--
          在input中的值,若ng-model与ng-value都存在的话,则ng-value中值会被覆盖,显示ng-model中的值
    -->
</head>
<body >
    <div ng-app="myApp" ng-controller="myControl">
         <input type="text"    id="val" ng-model="name" ng-value="name1" ng-blur="fun()"  >
        {{name}}
    </div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script>
        angular.module('valueExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.names = ['pizza', 'unicorns', 'robots'];
                    $scope.my = { favorite: 'unicorns' };
                }]);
    </script>


</head>
<body ng-app="valueExample" >
    <!--
        ng-repeat中使用value
    -->
    <form ng-controller="ExampleController">
        <h2>Which is your favorite?</h2>
        <label ng-repeat="name in names" for="{{name}}">
            {{name}}
            <input type="radio"
                   ng-model="my.favorite"
                   ng-value="name"
                   id="{{name}}"
                   name="favorite">
        </label>
        <div>You chose {{my.favorite}}</div>
    </form>

</body>
</html>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值