私は非常にイライラしており、質問の形式が不十分であることを事前にお詫び申し上げます。
簡単なリスト編集用に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]" />
入力を編集できましたが、最初のキープレス入力がフォーカスを失った後、さらに魔法が発生しました。