0

私は非常にイライラしており、質問の形式が不十分であることを事前にお詫び申し上げます。

簡単なリスト編集用にderictiveを作成しました:

angular.module('myApp').
    directive('variableList', function () {
        return {
            restrict: 'AE',
            templateUrl: 'variableList.html',
            replace: true,
            scope: {
                value: '='
            },
            controller: [
                '$scope', '$element', '$attrs', '$transclude',
                function($scope) {
                    $scope.removeListItem = function (index) {
                        $scope.value.splice(index, 1);
                    };
                    $scope.addListItem = function () {
                        $scope.value.push($scope.nextListItem);
                        $scope.nextListItem = null;
                    };
                }
            ]
        };
    });

とテンプレート

<div class="variable-list">
    <div class="variable-list-items">
        <div class="row collapse variable-list-item" ng-repeat="(index, val) in value">
            <div class="small-11 columns variable-list-item-value">
                <input type="text" ng-model="val" />
            </div>
            <div class="small-1 columns">
                <button class="button alert prefix no-margin icon-minus"
                        ng-click="removeListItem(index)"></button>
            </div>
        </div>
    </div>
    <div class="row collapse variable-list-controls">
        <div class="small-11 columns">
            <input type="text" ng-model="nextListItem" />
        </div>
        <div class="small-1 columns">
            <button ng-class="{disabled: !nextListItem}"
                    ng-click="addListItem()"
                    class="button success prefix no-margin icon-plus"></button>
        </div>
    </div>
</div>

テンプレートの重要な部分

<input type="text" ng-model="val" />

最終的に、私は非常に機能するUIを持っています ここに画像の説明を入力

しかし、既存のアイテムの入力は機能しません! それらを編集しようとしても何も起こりません。新しいアイテムの入力、ボタンの追加と削除は意図したとおりに機能します。

何か案は?

編集 私はこのようにモデルをバインドしようとしました

<input type="text" ng-model="value[key]" />

入力を編集できましたが、最初のキープレス入力がフォーカスを失った後、さらに魔法が発生しました。

4

1 に答える 1