码迷,mamicode.com
首页 > Web开发 > 详细

angularJS(3)

时间:2017-01-05 23:57:23      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:ima   变量   select   class   状态   ng-model   复制   gif   mod   

angularJS(3)

一.angularJs的指令模型ng-model指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。 
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

技术分享
技术分享
技术分享
<div ng-app="myapp" ng-controller="mycc">
    名字: <input ng-model="name">
</div>
<script>
var app = angular.module(‘myapp‘, []);
app.controller(‘mycc‘, function($scope) {
    $scope.name = “宋小宝";
});
</script>
技术分享
技术分享
技术分享

二.angularJs的指令模型ng-model指令:双向绑定

在修改输入域的值时, AngularJS 属性的值也将修改:

技术分享
技术分享
技术分享
<div ng-app="myapp" ng-controller="mycc">
    名字: <input ng-model="name">
    <h1>你输入的名称是:{{name}}</h1>
</div>

<script>
var app = angular.module(‘myapp‘, []);
app.controller(‘mycc‘, function($scope) {
    $scope.name = “宋小宝";
});
</script>
技术分享
技术分享
技术分享

三.angularJs的应用

技术分享
技术分享
技术分享
<div ng-app="myapp" ng-controller="myctrl">
    姓:<input type="text" ng-model="xing"><br>
        名:<input type="text" ng-model="ming">
        <h1>你的姓名是:{{xing+""+ming}}</h1>
</div>
<script>
    var app=angular.module("myapp",[]);
    app.controller("myctrl",function($scope){
         $scope.xing="宋";
         $scope.ming="小宝";
    })
</script>
技术分享
技术分享
技术分享

实例说明:
模块(m):var app = angular.module(‘myApp‘, []); 
控制器(c):app.controller("myctrl",function($scope){   })
视图(v):就是html区域

四.angularJs模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定

技术分享
技术分享
技术分享
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.name = “花果山美猴王";
});
</script>
技术分享
技术分享
技术分享

angularJS(3)

标签:ima   变量   select   class   状态   ng-model   复制   gif   mod   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!