AngularJS Data Binding

AngularJS zhong de shu ju bao ding shi mo xing he shi jian ying jian zhijian de tong sheng.

Shu ju mo xing

AngularJS ying yong xing tong chang you yi ge shu ju mo xing. Shu ju mo xing shi ke yong yu ying yong xing de shu ju de ji he.

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML shi jian

Xian shi AngularJS ying yong xing de HTML rong zhi cheng wei shi jian.

Shi jian keyi guan li mo xing, er you jie zhong fang shi zai shi jian zhong xian shi mo xing shu ju.

Ni keyi shi yong ng-bind Zhi ling hui dian xi de innerHTML bao ding dao zhui ding de mo xing shu xing:

Example

<p ng-bind="firstname"></p>

Try It Yourself

Ni hai neng shi yong shuang da hua dui {{ }} Lai xian shi mo xing zhong de nei rong:

Example

<p>First name: {{firstname}}</p>

Try It Yourself

Huo zhe, ni neng zai HTML kong zhi jian shang shi yong ng-model Zhi ling jiang mo xing bao ding dao shi jian.

ng-model zhi ling

Shi yong ng-model Zhi ling jiang mo xing zhong de shu ju bao ding dao HTML kong zhi jian (input, select, textarea) de shi jian shang.

Example

<input ng-model="firstname">

Try It Yourself

ng-model Zhi ling ti gong le mo xing he shi jian ying jian zhijian de shuang xiang bao ding.

Shuang xiang bao ding

AngularJS zhong de shu ju bao ding shi mo xing he shi jian ying jian zhijian de tong sheng.

Dang mo xing zhong de shu ju bian hua shi, shi jian ying jian hui fan she zhe zhong bian hua, er dang shi jian zhong de shu ju bian hua shi, mo xing ye hui geng xin. Zhe shi li jian qi zhi jian sheng fang shi, ri chi quan wei gao shou mo xing he shi jian ying jian shi chi gao xing.

Example

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

Try It Yourself

AngularJS Controllers

AngularJS zhong de ying yong xing bei kong zhi qi kong zhi. Qing zai AngularJS kong zhi qi zhang jie li du dian guan kong zhi qi de nei rong.

Koyi ba da yin hanyin ma'an kai zhi, kong zhi qi neng he shi jian ying jian quan wei fan li, ri chi zhi zhong yong mo xing shu ju. Yin wei AngularJS zhong de shu ju bao ding, shi jian ying jian hui fan she kong zhi qi zhong suo zuo de ren gai.

Example

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Try It Yourself