AngularJSのスコープ変数をdinamicallyにバインドして作成する

Question

コンテキスト：動的に編集可能なヘルプセクション（それぞれタイトルと内容を持つ）でヘルパーを構築しています。このヘルパーにヘルプセクションを追加するために、最後のヘルプ既存セクションの下部に「追加」ボタンがあります。 変数$scope.helpVisibleをバインドして、セクションの可視性をReadOnlyまたはEditableに設定するには、ng-showとng-hideを設定します。

問題：「追加」をクリックしてヘルパーに新しいヘルプセクションを追加すると、この新しい要素（div）の表示を設定するための新しい変数が必要になります。問題は、この新しい要素の可視性を決定するために前の変数が必要になることです。

新しいヘルプセクションを作成するたびに、新しいアイテムをプッシュするリスト$scope.listOfVilibilitiesを作成しようとしました。

「オンザフライ」スコープで新しい変数を作成し、ビューにバインドするにはどうすればよいですか？

Answer 1

オブジェクトを配列に作成し、ngRepeatディレクティブを使用して、この新しいオブジェクトをビューに追加してみてください。例えば、コントローラの

：

function MyCtrl($scope) { 
    $scope.list = []; 

    $scope.add = function(){ 
     $scope.list.push({value:void(0), disabled: false}); 
    } 
    $scope.delete = function(value){ 
     $scope.list = _.remove($scope.list, function(n){ 
     return n.value !== value; 
     }); 
    } 
} 

重要！私は削除機能でlodashライブラリを使用しました。 Doc. here

HTMLは次のようになります。

<div ng-controller="MyCtrl"> 
    <button ng-click="add()"> 
    Add 
    </button> 
    <ul> 
    <li ng-repeat="some in list"> 
     <input ng-model="some.value" ng-disabled="some.disabled"/> 
     <button ng-click="some.disabled = !some.disabled"> 
     {{!some.disabled}} 
     </button> 
     <button ng-click="delete(some.value)"> 
     Delete 
     </button> 
    </li> 
    </ul> 
</div> 

は、この例に見てみましょうjsfiddleに住んでいます。