Binding und Scope-Variablen in AngularJS dynamisch erstellen

Question

Kontext: Ich baue einen Helper mit dynamisch editierbaren Hilfe-Sektionen (jeder mit seinem Titel und Inhalt). Ich habe eine "Hinzufügen" -Schaltfläche am unteren Rand des letzten bestehenden Hilfebereichs, um diesem Helfer weitere Hilfeabschnitte hinzuzufügen. Ich binde eine Variable $scope.helpVisible, um die Sichtbarkeit des Abschnitts auf ReadOnly oder Editable mit ng-show und festzulegen.

Problem: Wenn ich auf "Hinzufügen" klicke, um dem Helfer einen neuen Hilfeabschnitt hinzuzufügen, brauche ich eine neue Variable, um die Sichtbarkeit dieses neuen Elements (eines Div) festzulegen. Das Problem besteht darin, dass die vorherige Variable verwendet wird, um die Sichtbarkeit dieses neuen Elements zu bestimmen.

Ich habe versucht, eine Liste zu erstellen $scope.listOfVilibilities schob ein neues Element jedes Mal, wenn ich einen neuen Hilfeabschnitt erstellen.

Wie kann ich neue Variablen im Bereich "on the fly" erstellen und in der Ansicht binden?

Answer 1

Versuchen Sie, Objekte in einem Array zu erstellen, und verwenden Sie die Direktive ngRepeat, um dieses neue Objekt in die Ansicht einzufügen.

zum Beispiel Controller:

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; 
     }); 
    } 
} 

Wichtig! Ich habe die Bibliothek lodash in der Löschfunktion verwendet. Doc. here

Das HTML sieht wie folgt aus:

<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> 

Werfen Sie einen Blick auf dieses Beispiel in jsfiddle leben.