TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個贊
局勢通過ng-model來實(shí)現(xiàn)，好比是result:{{Uname}}這樣的效果就是首先是刷新頁面顯示input,p的結(jié)果都是zs,然后當(dāng)你的輸入狂里面輸入你的值之后，后面的p標(biāo)簽的值也跟著改變
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個贊
Angular js (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。它支持整個開發(fā)進(jìn)程，提供web應(yīng)用的架構(gòu)，無需進(jìn)行手工DOM操作。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。雙向數(shù)據(jù)綁定可能是angularjs最酷最實(shí)用的特性,將MVC的原理展現(xiàn)地淋漓盡致.
AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應(yīng)的NG指令,所有的指令都負(fù)責(zé)針對view(即HTML中的ng-model)來設(shè)置數(shù)據(jù)綁定。因此, NG框架是在DOM加載完成之后, 才開始起作用的.
在html中:
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<label ng-model="myLabel"></label>
<input type="text" ng-model="myInput" />
<button ng-model="myButton" ng-click="btnClicked"></button>
</div>
</body>
在js中:
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我們在html中先定義一個angular的app,指定一個angular的controller,則該controller會對應(yīng)于一個作用域(可以用$scope前綴來指定作用域中的屬性和方法等). 則在該ngCtl的作用域內(nèi)的HTML標(biāo)簽, 其值或者操作都可以通過$scope的方式跟js中的屬性和方法進(jìn)行綁定.
舉報