AngularJS - キー値オブジェクトの双方向バインディングなし

私はangularJSについて何も知りません。以前はknockoutJSで作業していましたが、角になると私はただ仮定しています。AngularJS - キー値オブジェクトの双方向バインディングなし

私はこのようなコードを持っている：

angular.module("umbraco").controller("recallCtrl", 
function ($scope, $routeParams) { 

    $scope.dcList = { 
     key: "value", 
     abc: "aaaa", 
     prop: "tadaa!" 
    } 
});

を、次のようにマークアップ：

<div ng-controller="recallCtrl"> 
     <table class="table table-sm"> 
      <thead> 
       <tr> 
        <td></td> 
        <th>Key</th> 
        <th>Value</th> 
       </tr> 
      </thead> 
      <tr ng-repeat="(key, value) in dcList"> 
       <td> 

       </td> 
       <td> 
        <input ng-model="key" /> 
       </td> 
       <td> 
        <input ng-model="value"/> 
       </td> 
      </tr> 

     </table> 

     <pre>{{dcList | json}}</pre> 
    </div>

は、だから、私はその対応する入力を編集するときに値のHTML変更の終わりでdcListの出力いけません私はオブジェクトにバインドされていると仮定？

私が何か間違っている場合は、アドバイスをお願いします。オブジェクトを作成し、そのキーと値を変更できるようにしたい。

出典

2016-09-21 Raimonds

あなたは、このようにモジュール宣言する必要があります： 'angular.module（ "umbraco"、[]）'。あなたは正方形の括弧を忘れました、あなたは基本的にそれを宣言していないモジュールを要求していました。私はそれがあなたの問題を解決したいと思います！ –

'ng-model'は現在のスコープと比較して評価されます。このスコープは' ng-repeat'にローカライズされています。 *キー*を変更できるとは思えませんが、* value *は更新されています。親の 'dcList'オブジェクトに影響していないので、あなたはそれを見ていません。 'dcList'のプロパティの* value *を更新するには、' ng-repeat'の中で 'ng-model =" dcList [key] "'を使わなければなりません。 – Lex

@Peter_Fretterこのケースでは、私は言ったように、角度については何も分かりませんし、それがどのように機能するか、ただ仮定していますが、角度の助けを借りて構築されたUmbraco CMSを使用しています。 ng-app宣言をしていないので、角括弧を設定すると、それはちょうど壊れます。 – Raimonds

、このコード、キーに対応する値の変化をテストしてください"および"値 "変数はng-repeatの範囲内にあり、元のオブジェクトを直接参照することはありません。

「値」を保持するのは簡単です。valueの代わりにを使用してください。新しい鍵を追加するにはもう少し作業が必要です。ここでは、各 "キー"フィールドにng-blurを添付しました。このフィールドは、フィールドがぼやけたときに新しいキーを初期化します。（ng-changeは、すべてのキーストロークで新しいフィールドを作成しますが、これは必要ではありません）。新しいキーの入力を開始すると、その値は消えてしまいます。これは、が直ちに新しいキー名を参照するためです。もちろん、これは実際のUIではいくらか混乱します。 createNewKey関数に別の動作をコード化することができます（古い値を新しいキーにコピーする、元のキーを削除するなど）。

function recallCtrl($scope) { 
 
    $scope.dcList = { 
 
     key: "value", 
 
     abc: "aaaa", 
 
     prop: "tadaa!" 
 
    } 
 
    
 
    $scope.createNewKey = function(k) { 
 
     $scope.dcList[k]=""; 
 
    } 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
<div ng-controller="recallCtrl"> 
 
    <table class="table table-sm"> 
 
     <thead> 
 
      <tr> 
 
       <th>Key</th> 
 
       <th>Value</th> 
 
      </tr> 
 
     </thead> 
 
     <tr ng-repeat="(key, value) in dcList"> 
 
      <td> 
 
       <input ng-model="key" ng-blur="createNewKey(key)"/> 
 
      </td> 
 
      <td> 
 
       <input ng-model="dcList[key]"/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 

 
    <pre>{{dcList | json}}</pre> 
 
    </div>

出典

2016-09-21 13:47:32

素敵な説明をありがとう:)私は自分のニーズに合わせて調整できると思う。 – Raimonds

'key'と' value'はあなたが提案したようにプリミティブに変わりません。 OPのオリジナルコードの ''要素のすぐ隣に '{{key}}'と '{{value}} 'を追加することでこれを確認できます。 ' 'の値を更新すると、対応する' key'または 'value'も更新されます。 – Lex

@Lex、そうです。有難うございます。私は答えを修正します。 –

あなたの現在のコードが動作しない理由が原因「キーである

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 

 
    $scope.dcList = { 
 
     key: "value", 
 
     abc: "aaaa", 
 
     prop: "tadaa!" 
 
    } 
 
    })

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 

 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
     <table class="table table-sm"> 
 
     <thead> 
 
      <tr> 
 
       <td></td> 
 
       <th>Key</th> 
 
       <th>Value</th> 
 
      </tr> 
 
     </thead> 
 
     <tr ng-repeat="(key, value) in dcList"> 
 
      <td> 
 

 
      </td> 
 
      <td> 
 
       <input ng-model="key" disabled/> 
 
      </td> 
 
      <td> 
 
       <input ng-model="dcList[key]" /> 
 
      </td> 
 
     </tr> 
 

 
    </table> 
 

 
    <pre>{{dcList | json}}</pre> 
 
    </div> 
 
</body> 
 

 
</html>

Here is the plunker

出典

2016-09-21 13:35:10 Sravan

これは半分の質問に答えるだけです。 –

はい、ハッシュのキーを変更することは正しいことではないので、私は今のところ鍵を無効にしました。質問者が私の答えを延長したいのであれば私はただ待っています。 – Sravan

その必要はありません、私はすでにそれが悪い考えであることを既に理解していました。 – Raimonds

AngularJS - キー値オブジェクトの双方向バインディングなし

答えて

関連する問題