新しいアイテムを動的に追加するたびに既存のデータを追跡する方法

Question

<div ng-controller="MyCtrl"> 
    <button ng-click=addItem()>add Item</button> 
    <div ng-repeat="item in content"> 
    <my-directive category-options="categoryOptions" item-options="itemOptions" category-option-change="categoryOptionChange(selectedOption)" delete-item="deleteItem(index)" index={{index}}></my-directive> 
    </div> 
</div> 

myApp.directive('myDirective', function() { 
    return { 
    scope: { 
     categoryOptions: "=", 
     deleteItem: "&", 
     index: '@', 
     itemOptions: "=", 
     categoryOptionChange: "&" 
    }, 
    restrict: 'AE', 
    template: "<p>\r" + 
     "\n" + 
     " <select ng-model=\"categoryOptions.selectedOption\" ng-options=\"option as option.name for option in categoryOptions\" ng-change=\"categoryOptionChange({selectedOption:categoryOptions.selectedOption})\">\r" + 
     "\n" + 
     "   <option value=\"\">choose</option>\r" + 
     "\n" + 
     " </select> \r" + 
     "\n" + 
     " <select ng-model=\"itemOptions.selectedOption\" ng-options=\"option as option.name for option in itemOptions\">\r" + 
     "\n" + 
     "  <option value=\"\">choose</option>\r" + 
     "\n" + 
     " </select>\r" + 
     "\n" + 
     "  [<a href ng-click=\"deleteItem({index:index})\">X</a>]\r" + 
     "\n" + 
     "</p>\r" + 
     "\n" 

    } 
}); 

クリックするたびに、2つの選択コントロールで新しいアイテムが追加されます。第1の選択制御選択オプションに基づいて、第2の選択制御オプションが変更される。 ユーザーはできるだけ多くのアイテムを追加できます。 ここまでうまくいきます。私が直面している問題は、アイテムを追加し、選択コントロール内のオプションを変更してから新しいアイテムを追加すると、新しく追加されたアイテムが以前に選択されたものと同じデータを表示しているということです。 は、私は、これはデータバインディング問題ですけど、私は効率的になるようにこれを解決する方法を確認していないこと

1. デフォルト私は新しい項目を追加するたびにオプションが表示されなければならない「を選択してください」。
2. 変更があれば、各項目のデータを把握できるはずです。

は私がJSFiddle

Answer 1

私は解決策を提案します。

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

app.controller("mainController", function($scope) { 
    $scope.content = []; 
    $scope.addSentence = function() { 
    $scope.content.push({}); 
    }; 
    $scope.deleteItem = function(index) { 
     $scope.content.splice(index, 1); 
    }; 
    $scope.categoryOptions = [{ 
    name: "Books" 
    }, { 
    name: "Electronics" 
    }]; 
    $scope.itemOptions = { 
    books: [{ 
     name: "Harry Potter1" 
    }, { 
     name: "Harry Potter2" 
    }, { 
     name: "Harry Potter3" 
    }], 
    electronics: [{ 
     name: "Computer" 
    }, { 
     name: "Phone" 
    }, { 
     name: "Television" 
    }] 
    }; 
}); 

app.directive('myDirective', function() { 
    return { 
    scope: { 
     categoryData: "=categoryOptions", 
     deleteItem: "&", 
     index: '@', 
     itemData: "=itemOptions", 
     categoryOptionChange: "&" 
    }, 
    restrict: 'AE', 
    templateUrl: "itemSelectTemplate.html", 
    controller: function($scope) { 
     $scope.itemOptions = []; 
     $scope.categorySelectedOption = {}; 
     $scope.itemSelectedOption = {}; 
     $scope.categoryOptionChange = function(selectedOption) { 
     if (selectedOption !== null) { 
      switch (selectedOption.name) { 
      case "Books": 
       $scope.itemOptions = $scope.itemData.books; 
       break; 
      case "Electronics": 
       $scope.itemOptions = $scope.itemData.electronics; 
       break; 
      } 
     } 
     } 
    } 
    } 
}); 

が、これはあなたを助けることを願っています：ここでのサンプルコードだ@sumit Plunker - 作業例はで見つけることができます！ :)

Answer 2

ごとの指示に基づき指示にコントローラを取り付け、itemOptionsとディレクティブコントローラの契約に含まれています。各ディレクティブの状態を別々に保存する必要がありますが、そうではありません。つまり、親スコープのすべてのディレクティブの状態を保存しています。