2013-05-11 3 views
8
私はキーレンダリングしています

AngularJS:キー値を持つngのリピート - 更新オブジェクト

<div ng-controller="mainCtrl">  
    <div ng-repeat="record in records"> 
    <div ng-repeat="(key, value) in record"> 
     <input ng-model="key" />: <input ng-model="value" /> 
    </div> 
    </div> 
</div> 

JS:このようなNG-繰り返しで値オブジェクトの配列を

var mainCtrl = function($scope){ 
$scope.records = [ 
     {'key1':'val1'}, 
     {'key2':'val2'} 
     ]; 
} 

問題は、キーと値を入力タグで更新することはできません。何らかの理由で、ng-repeatを繰り返し(キー、値)した後に一方向のバインディングになります。

フィドル:http://jsfiddle.net/BSbqU/1/

私はそれ結合双方向作ることができますどのように?または、この問題をng-repeatのネストされた別の方法で解決する必要がありますか?

答えて

6
<div ng-controller="mainCtrl">  
<div ng-repeat="record in records"> 

     <input ng-model="record.name" />: <input ng-model="record.value" /> 
    </div> 
</div> 

そして、JS:

<div ng-controller="mainCtrl">  
    <div ng-repeat="record in records"> 
    <div ng-repeat="(key, value) in record"> 
     <input ng-model="key" />: <input ng-model="record[key]" /> 
    </div> 
    </div> 
</div> 

ない華麗な、それは動作します:

var myApp = angular.module('myApp', []); 

var mainCtrl = function($scope){ 
$scope.records = [ 
{'name':'key1','value':'val1'}, 
{'name':'key2', 'value':'val2'} 
     ]; 
} 
+0

これは入力フィールドを編集可能にしますが、変更された値はモデルを更新しません。結びつきは一方的なままです。 Fiddle:http://jsfiddle.net/BSbqU/2/ –

+0

Gotcha、ng-modelとしてキーを使用することと関係がありましたが、名前と値を割り当ててインナーリピートを削除することで動作させることができました。 jsfiddleを動作させる。 – Jason

+0

あなたは内部リピートなしでそれをやるのがとても面白いですが、あなたが与えたフィドルはアップデートされていません。 –

6

このオプションは、オブジェクトで動作します。

+0

値のためのその仕事だけでなく、これもキーを更新しますか? –

0

私の頭を骨に引っかくと、私はオブジェクトのキー名を更新する方法を見つけました。 少しひねられていますが、それは私のために働きます。

<input ng-model="key" /> 

あなたは

var app = angular.module('myApp',[]); 
var focus_key=-1; 
app.directive('lineKey', function() { 
    return function (scope, element, attrs) { 
     if(focus_key==scope[attrs.ngModel]){ 
      focus_key=-1; 
      element[0].focus(); 
     } 
    }; 
}); 

最終的にあなたの入力にフォーカスを維持するために単に 'lineKey' ディレクティブが必要になります

<input type="text" ng-model="key" ng-change="update_key(record,key,$index)" line-key/> 

に置き換え、「を追加update_key 'メソッドを使用してください

app.controller('mainCtrl',['$scope'],function($scope){ 
     $scope.records = [ 
     {'key1':'val1'}, 
     {'key2':'val2'} 
    ]; 
    $scope.update_key=function(obj,new_key,id){ 
     var keys = Object.keys(obj); 
     var values = Object.values(obj); 
     var old_key = keys[id]; 
     if(keys.indexOf(new_key)==-1&&new_key.length>0){ 
      // clear ... 
      for(var i=0,key;key=keys[i];i++){ delete obj[key]; } 
      keys[id]=new_key;//... change key value ... 
      focus_key=new_key;//... notify to keep focus on modifyed input ... 
      // ... and refill to preserve the position in the object list 
      for(var i=0,key;key=keys[i];i++){ obj[key]=values[i]; } 
     } 
    }; 
} 
関連する問題