2015-09-06 50 views
2

我有以下的樣品模型:請AngularJS與模型同步動態表

{ 
a:{ 
    x:0, 
    z:0, 
    f:1 
    }, 
b:{ 
    x:"a", 
    u:"b" 
    } 
} 

其中我渲染成兩個不同的表

<div class="col-sm-5"> 
       <h1>A</h1> 
       <table> 
        <tr> 
         <th>Key</th> 
         <th>Value</th> 
        </tr> 
        <tr ng-repeat="(key,value) in schema.a"> 
         <td> 
          <input type="text" ng-model="key" required> 
         </td> 
         <td> 
          <input type="text" ng-model="value" required> 
         </td> 
         <td></td> 
        </tr> 
       </table> 
      </div> 
      <div class="col-sm-5 col-md-offset-2"> 
       <h1>B</h1> 
       <table> 
        <tr> 
         <th>Key</th> 
         <th>Value</th> 
        </tr> 
        <tr ng-repeat="(key,value) in schema.b"> 
         <td> 
          <input type="text" ng-model="key" required> 
         </td> 
         <td> 
          <input type="text" ng-model="value" required> 
         </td> 
         <td></td> 
        </tr> 
       </table> 
      </div> 

的表是動態的,這意味着我可以添加新行到它。

現在,當我改變任何值的表內,他們地圖無法與模型同步 - >編輯不可能

  • 什麼我需要做存儲的變化自動在原 模型?
  • 如果這是不可能的,我怎麼能從我的表格 中得到一個Json Schema,就像表格從那個表格中渲染出來的一樣,所以我只需要 覆蓋舊錶格呢?

回答

3

首先,您不能動態更改對象屬性名稱或key。所以你想用ng-model="key"做什麼根本行不通。

至於value部分,你應該用你的ng-model

<tr ng-repeat="(key,value) in schema.b"> 
    <td>{{key}}</td> 
    <td> 
     <input type="text" ng-model="schema.b[key]" required> 
    </td> 
    <td></td> 
</tr> 

對象引用,如果您需要能夠編輯key,那麼你需要你的數據結構改變爲對象的數組每個對象具有相同的密鑰屬性名稱

+0

謝謝。現在我禁用了鍵編輯功能,以便用戶在創建時設置它 –