Angularjs學習筆記14 專案演示（一）

不知不覺已經接近尾聲了，更新的有點慢。但是隨著時間的推移，我對angularjs有了更深的了解。下一步計畫，搞個angularjs開發總結，細數angular中的一些陷阱以及技巧，肯定會相當有趣。

大概的功能點羅列如下：

1.使用者輸入動態統計，以及按鈕的置灰；

2.filter展示，也就是搜尋功能；

3.列表的新增和刪除效果；

4.任務狀態的修改；

一、使用者輸入動態統計，以及按鈕置灰

html**：

123

45

class="col-sm-3">
type="text"
class="form-control"
id="inputname"
ng-model="name"
maxlength="20"
placeholder="請輸入..."/>
還可以輸入
class="red"> } span>個字元！span>
div>
type="button"
ng-click="addnew()"
ng-disabled="!name"
type="button"
class="btn btn-default">添 加button>
js**：
123

45

var max_len=20;

$scope.name="";

$scope.inputremaining=function()

說明：**很簡單，字元統計通過inputremaining的返回值來進行計算。按鈕置灰用到了ng-disabled屬性，當使用者輸入為空時，ng-disabled返回true，則按鈕不可用。

二、filter搜尋功能

html**：

123

4567
891011
1213

class="form-group">
for="searchinput"
class="col-sm-2 control-label">搜尋條件：label>
class="col-sm-3">
type="text"
class="form-control"
id="searchinput"
ng-model="searchtext.name"
maxlength="20"
placeholder="請輸入名稱..." />
br>
div>
div>
ng-if="!searchtext.name">您還有
class="red">}span>項任務未完成!
div>
ng-if="searchtext.name.length">您輸入的條件是：
class="red">}span>，搜尋到
class="red">}span>項!
div>
說明：過濾器前面筆記已經詳細說明過，這裡就不贅述了。至於統計多少項，用陣列的length就可以辦到了。此處用ng-if來選擇容器的隱藏與顯示，當使用者輸入操作時，顯示搜尋條件及搜尋統計。  

angularjs學習筆記

不要用控制器去繼承控制器，通用的通過service來通用 不要試圖服用controller，乙個控制器只負責乙個塊試圖 不要在controller中操作dom，這不是controller的職責，用指令只做 不要在controller中做資料初始化，ng有表單控制項 不要在controller中做資料...

angularjs 學習筆記

文件 function angular bootstrap element,modules config 第乙個引數，要繫結的元素，第二個引數要繫結的modules 第三個引數 暫不明確 controller welcomecontroller function scope angular.boot...

Angular JS 學習筆記

特定領域語言 指令 當關聯的html結構進入編譯階段時應該執行的操作，可以寫在名稱裡，屬性裡，css類名裡 本質上是函式 穩定的dom 繫結了資料模型的dom元素的例項不會在繫結的生命週期發生改變 作用域 用來檢測模型的改變和為表示式提供執行上下文的 angularjs 和其它模板系統不同，它使用的...