angularJS辞書を入力に入れるにはどうすればいいですか

コントローラーに辞書データがあり、それをng-repeatで表示しています。 keyはタイトルであり、valueはvalueフィールドとしてinputに配置されます。ユーザーが値を編集してフォームを送信できるようにします。すべての入力を処理できる最良の方法は何ですか？私はng-modelを試しましたが、私は辞書の値を直接変更することはできませんので、私は新しいデータを格納するために別の辞書を作ることに傾いています。それは非常に効率的なようには思われないので、私はそこに良い方法があるのだろうかと思っています。angularJS辞書を入力に入れるにはどうすればいいですか

編集：私はこのインターフェイスを持っており、いくつかの値を追加します。

export interface Iint { 
    [title: string] : string; 
}

これはコンストラクタで、私はvalues（データ、より多くのデータ）のそれぞれは、ユーザが編集して変更することができ、それ自身の入力テキストボックスに表示したいhtmlで

this.hashMap : Iint = {}; 
this.hashMap["Next Title"] = "data"; 
this.hashMap["Next Value"] = "more data;

です辞書の値。ユーザーがデータを保存して更新できるようになる前に、検証やその他の作業が必要です。重複した配列を作成する必要があるかどうかはわかりません。

出典

2017-02-14 mysticalstick

あなたは辞書を何を意味するのですか？例を教えてください。 – Korte

詳細編集 – mysticalstick

この例を確認してください。あなたの答えを編集する前にAngular v1で実装しました。

https://plnkr.co/edit/9Y33BDQTngPZx2Vpx5Zz?p=preview

script.js

var app = angular.module('myApp',[]); 
app.controller('MyCtrl', ['$scope', function($scope) { 

    $scope.dict = { 
    "Title1" : "Hello World !", 
    "Title2" : "Beautiful day", 
    "Title3" : "How about that!?" 
    }; 

    $scope.submitForm = function() { 
    console.log($scope.dict); 
    alert(JSON.stringify($scope.dict)); 
    }; 
}]);

のindex.html：アンギュラv2の中でそれを実装する

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app="myApp"> 
    <h1>Dictionary Inputs</h1> 
    <div ng-controller="MyCtrl"> 
     <form name="myForm" ng-submit="submitForm()"> 
     <ul> 
      <li ng-repeat="(key,val) in dict"> 
     {{key}} : <input type="text" ng-model="$parent.dict[key]"> 
      </li> 
     </ul> 
     <button type="submit"> Submit</button> 
     </form> 
     <br/> 
     <div> 
     $scope.dict : {{dict}} 
     </div> 
    </div> 
    </body> 
</html>

は、同様の行にあるかもしれません。

出典

2017-02-14 19:03:46

ngRepeatは、次の構文を使用して、オブジェクトのプロパティを反復処理するために取得することが可能である：

<div ng-repeat="(key, value) in myObj"> ... </div>

参考：https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties

出典

2017-02-14 19:05:51 pranavjindal999

angularJS辞書を入力に入れるにはどうすればいいですか

答えて

関連する問題