2016-09-28 7 views
1

は、私はそうのよう$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項目のインライン編集を可能にする機能を作成しています:

enter image description here

これは、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項目を切り替えることでこれを実現しています。しかし、角度が、私が使用する必要があり、このユースケースのためのいくつかの有用性を持っているのだろうか。

+0

テキスト –

+0

のためのあなたの入力の追加NG-読み取り専用=「todoItem.editMode!」 ng-blurを使うことができます。焦点を当てたときにのみ表示させる。 – ram1993

答えて

3

私がこのような場合に行うことは、editModeプロパティが各アイテムにありませんが、$scope.currentEditItemIdのようなスコープ変数を使用しています。

$scope.toggleEditMode = function (listID, itemID, enableEdit) { 
    if (enableEdit === 1) { 
     $scope.currentEditItemId = itemId; 
     // ... whatever you need to do here 
    } 
} 

をそしてHTMLは次のようになります:あなたはこのような何かを

<span ng-if="itemId != currentEditItemId" class="todo-item-label-wrapper"> 
    <div ng-click="toggleEditMode(listID, itemID, 1)" class="todo-item-label">[(todoItem.value)]</div> 
</span> 
<span ng-if="itemId == currentEditItemId" class="todo-input-wrapper"> 
    <input show-focus="todoItem.id == currentEditItemId" ng-keyup="$event.keyCode == 13 && toggleEditMode(listID, itemID, 0)" type="text" ng-model="todoItem.value" class="form-control"> 
</span> 
+0

ありがとう、それは素晴らしい解決策です。それは技術的に私が探していたことをしませんが、それは私が不必要に頼んだものになります。問題の説明で最初に議論したことを行う方法を他の誰もが返答しない場合は、これを受け入れられた回答とします。 –

0

このビット再訪、私はあなたがスコープ内のすべてを更新する可能性が一つの方法は、同時にそれぞれをインスタンス化することです実現しますコンストラクタを使用して$scopeのアイテムを作成し、コンストラクタのプロトタイプを更新します。これは私が上に提起した元のユースケース(実際にはを除いてスコープ以外のすべてのアイテムを更新する方が良いでしょう)では本当に解決しませんが、まだ役に立つアプリケーションがあると思います。

HTML::

<div ng-app="myApp" ng-controller="toDo"> 
    <div ng-click="toggleEdit(index)" ng-class="{{item.editable}}" ng-repeat="(index, item) in items"> {{item.title}} </div> 
    </div> 

JS:クリックした、アイテム、他の項目のアップデートロットを持つようにしたい場合は

そう、あなたはこのような何かを行うことができます

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

function newItem(title) { 
    this.title = title; 
} 
newItem.prototype.editable = 'foo'; 

function toggleAll() { 
    newItem.prototype.editable = 'bar'; 
} 

app.controller('toDo', function($scope) { 
    $scope.items = [] 

    for (var i = 0; i <= 10; i++) { 
     var item = new newItem("item" + i); 
     $scope.items.push(item); 
    } 

    $scope.toggleEdit = function(index) { 
     toggleAll(); 
    } 

}); 

結果:

ここでは、任意の項目がクリックされたすべての項目のクラスbarにクラスfooトグルを参照してください。

enter image description here

関連する問題