angularJs實現動態增加輸入框

摘要：首先，有一個這樣的需求，就是說，我點擊添加，會動態出現需要輸入的輸入框。我們需要定義一個對象，類似這種，

{spc:{},spctions:[]}

意思是spc對應的是一個對象，spctions對應的是一個列表。要實現動態插入的效果，我們只需要往spctions這個列表中插入一個空對應即可{}，就是那么的簡單。

最終需要插入的是兩張表，相當於一對多的關系。這點要明白。當然 這里我們重點講解 動態插入的原理和angular如何實現。

js代碼

 //增加規格選項行
    $scope.addTableRow=function(){
        $scope.entity.specificationOptionList.push({});
    }

html代碼

 <tbody>
                      <tr ng-repeat="pojo in entity.specificationOptionList">
                           
                            <td>
                                <input  class="form-control" placeholder="規格選項" ng-model="pojo.optionName">
                            </td>
                            <td>
                                <input  class="form-control" placeholder="排序" ng-model="pojo.orders">
                            </td>
                            <td>
                                <button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)" ><i class="fa fa-trash-o"></i> 刪除</button>
                            </td>
                      </tr>
                    </tbody>

說一下需要注意的地方。這樣寫肯定不行，因為會報錯

entity.specificationOptionList    未定義，所以 我們要初始化一下。最好在點擊新增的按鈕上初始化，因為。。。（自己試下就知道了）
在按鈕上 添加 這行  即可

ng-click="entity={specificationOptionList:[]}"

刪除的話，原理是傳一個數組坐標，在數組中刪除。獲取遍歷list的坐標是  $index  獲取


ok  超級簡單。 不懂留言    不得不說  雙向綁定爽死 要是用jquery  搞死你  框架的魅力