一次五分鐘 angularJS （1）—— Binding

時間 2019-11-11

標籤一次五分 5分 angularjs binding 欄目 AngularJS 简体版

原文原文鏈接

引用angularjsjavascript

須要使用AngularJS，須要引用AngularJS的文件css

ng-apphtml

要將angular用到頁面綁定的時候，咱們須要指明它的做用域。java

在上圖中，ng-app="" 表示咱們如今演示的angular的做用域在該<div>標籤以內。固然咱們也能夠將ng-app=""寫在<body>標籤上。寫在哪一個標籤，咱們的angular語法就支持在哪。angularjs

接下來，咱們看看效果app

能夠看出，<div>中的{{2+2}}就被解析成4了，而<div>外的{{2+2}}則原樣輸出。spa

表達式htm

在angular語法中，{{}}中的內容即爲表達式，能夠做通常javascript語法處理。blog

Bindingip

咱們在頁面上添加一個<input>，但願<input>輸入什麼，{{}}表達式就顯示什麼。

看看效果

能夠看到文本框中輸入什麼，「Hello」後面就會顯示文本框中的內容，這就是angular中的binding

其中ng-model的值，至關於定義了一個變量，該變量名爲name。若是該變量不存在則建立它。該變量的值綁定在當前的<input>標籤的value屬性值上。

{{name}}則表示讀取ng-model對應的變量name的值，即<input>的value。

示例

在html頁面上添加2個css樣式，分別是顯示紅色和綠色。

將<span>的class屬性與文本框的值進行綁定，如今咱們在文本框中輸入red，green後看看效果

原創博客，未經容許，請勿轉載。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。