angularJS（3）

標籤：clear   blog   html 表單   輸入   type   複製   名稱   pyc   技術分享   

一.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）