ng-model指令

最新推荐文章于 2019-06-17 21:01:27 发布

monkey_four

最新推荐文章于 2019-06-17 21:01:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS学习文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/monkey_four/article/details/51655447

AngularJS学习专栏收录该内容

9 篇文章

订阅专栏

ng-model指令作用是绑定HTML表单元素到AngularJS应用程序数据中，即$scope变量中．

语法：

其中tag可以是input, select, textarea

如：

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>

<script>
    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope){
        $scope.name = "tina"
    })
</script>

ng-model可实现数据双向绑定，上例是通过控制$scope变量中的name值，input元素只会跟着name值变化而变化；除此之外也可以让name值由input输入值来控制．如：

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>