は、私はそうのよう$scope
に格納されているオブジェクトを持っていると言う:
$scope.todo = [
{
"title" : "Groceries",
"todoItems" : [
{
"title" : "Milk",
"status" : "Not Done"
},
{
"title" : "Eggs",
"status" : "Not Done"
},
{
"title" : "Bread",
"status" : "Done"
}
]
},
{
"title" : "Medical",
"todoItems" : [
{
"title" : "Make eye doctor appointment",
"status" : "Not Done"
},
{
"title" : "Go to pharmacy",
"status" : "Not Done"
},
{
"title" : "Take vitamins",
"status" : "Done"
}
]
}
];
私はそうのように、各TODO項目のインライン編集を可能にする機能を作成しています:
これは、editModeというToDoリスト項目のプロパティを切り替えることで実現します。
<div ng-app="myApp">
<div ng-controller="dashBoard">
<div class="panel panel-default list-[(listID)]" ng-repeat="(listID, todoList) in todo" ng-cloak>
<div class="panel-heading">[(todoList.title)]</div>
<ul class="list-group">
<li ng-repeat="(itemID, todoItem) in todoList.todoItems" data-as-sortable="board.dragControlListeners" data-ng-model="items" class="status-[(todoItem.status)] todo-item todo-item-[(itemID)]" data-as-sortable-item>
<div class="input-group">
<span data-as-sortable-item-handle class="input-group-addon">
<input ng-click="toggleStatus(listID, itemID, todoItem.status)" type="checkbox" ng-checked="todoItem.status == 1">
</span>
<span ng-if="!todoItem.editMode" class="todo-item-label-wrapper">
<div ng-click="toggleEditMode(listID, itemID, 1)" class="todo-item-label">[(todoItem.value)]</div>
</span>
<span ng-if="todoItem.editMode" class="todo-input-wrapper">
<input show-focus="todoItem.editMode" ng-keyup="$event.keyCode == 13 && toggleEditMode(listID, itemID, 0)" type="text" ng-model="todoItem.value" class="form-control">
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
任意のtodo項目がクリックされると、編集モードになります。 todo項目は、ユーザーがenterキーを押すまで編集モードのままです。私は同時に編集モードで複数のtodo項目を持つことが不可能にしたいと思います。 todo項目 "foo"をクリックしてtodo項目 "bar"をクリックすると、todo項目 "foo"は読み取り専用モードに戻ります。
私は現在
$scope.toggleEditMode = function(listID, itemID, editMode) {
$scope.todo[listID].todoItems[itemID].editMode = editMode;
//Turn off edit mode on every todo item other than the one that was just clicked
angular.forEach($scope.todo[listID].todoItems, function(todoItem, foreignItemID) {
if (foreignItemID !== itemID) {
$scope.todo[listID].todoItems[foreignItemID].editMode = 0;
}
});
}
:例えば、個別angular.forEach()
と、すべてのTODO項目を切り替えることでこれを実現しています。しかし、角度が、私が使用する必要があり、このユースケースのためのいくつかの有用性を持っているのだろうか。
テキスト –
のためのあなたの入力の追加NG-読み取り専用=「todoItem.editMode!」 ng-blurを使うことができます。焦点を当てたときにのみ表示させる。 – ram1993