12

angular.js を使用して、編集 (および後で送信) するためにユーザーに表示するフォーム フィールドの動的リストを作成します。

var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
    $scope.fields = {
        foo: "foo",
        bar: "bar",
        baz: "baz"
    };
});

そしてHTML：

<div ng-app="app" ng-controller="Ctrl">
    <table>
        <th>key</th>
        <th>value</th>
        <th>fields[key]</th>
        <tr ng-repeat="(key,value) in fields">
            <td>{{key}}:</td>
            <td><input type="text" ng-model="value"/></td>
            <td><input type="text" ng-model="fields[key]"/></td>
        </tr>
    </table>
</div>

このフィドルを参照してください。理由がわかりませんが、テキスト入力ボックスは編集できません。value上記のように、との 2 つの方法を試しましたfields[key]。valueはまったく編集できず、fields[key]1回のキーストロークでぼやけてしまいます。私は何を間違っていますか？ありがとうございました。

4

3 に答える 3

5

SET はなぜそれが起こっているのか答えましたが、目的の動作を実現するための回避策は、キーの別の配列を維持し、それらのキーから ng-repeat を実行することです。テスト用にいくつかのテキスト フィールドを追加して、さらにプロパティを追加しました$scope.fields

フィールド カウントが変更される可能性があるという要件がある場合は、$watch を使用して、プロパティ カウントが変更されたときにキーを動的に設定できます。

http://jsfiddle.net/aERwc/10/

マークアップ

<div ng-app="app" ng-controller="Ctrl">
    <table>
        <th>key</th>
        <th>value</th>
        <tr ng-repeat="key in fieldKeys">
            <td>{{key}}:</td>
            <td><input type="text" ng-model="fields[key]"/></td>
        </tr>
    </table>
    <div><h6>Add a field</h6>
        key: <input type="text" ng-model="keyToAdd" /><br />
        value: <input type="text" ng-model="valueToAdd" />
        <button ng-click="addField()">Add Field</button>
    </div>
</div>

コントローラ

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

app.controller('Ctrl', function($scope) {
    $scope.fields = {
        foo: "foo",
        bar: "bar",
        baz: "baz"
    };
    $scope.fieldKeys = [];

    $scope.setFieldKeys = function() {
        var keys = [];
        for (key in $scope.fields) {
            keys.push(key);
        }
        $scope.fieldKeys = keys;
    }

    $scope.addField = function() {
        $scope.fields[$scope.keyToAdd] = $scope.valueToAdd;
        $scope.setFieldKeys();
        $scope.keyToAdd = '';
        $scope.valueToAdd = '';
    }

    $scope.setFieldKeys();
});
于 2013-02-27T18:52:39.893 に答える
3

オブジェクトの配列を使用する必要があります。うまくいけば、モデルを作り直すことができます:

$scope.fields = [
   {label: "foo", value: "foov"},
   {label: "bar", value: "barv"},
   {label: "baz", value: "bazv"}
];

<tr ng-repeat="field in fields">
  <td>{{field.label}}:</td>
  <td><input type="text" ng-model="field.value">

フィドル。

于 2013-02-27T18:42:24.097 に答える
3

編集可能ですが、キーを押すたびにテキストフィールドがフォーカスを失うため、もう一度クリックして別の文字を入力する必要があります。

これは、いずれかのモデルが変更されるたびに、テンプレート全体が再レンダリングされるために発生します。また、テンプレートが再レンダリングされた後、現在、どの入力にフォーカスする必要があるかを知る方法はありません。したがって、そのように作成する必要があり、選択した入力にフォーカスを保持するためのディレクティブを記述したい場合があります。

于 2013-02-27T18:42:47.627 に答える