angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangularjs-ng-switch

How to add many fields with ng-switch (angularjs)


I have two nested ng-repeat,and i wanted to add the same form MiseEnContext many times,inside this "MiseEncontext" i wanted to add some inputs, but when i add text it's added for all my MiseEnContext Question: How to isolate my MiseEncontext ?

'<h4>Exercice Redactionnel</h4>\
                    <ul>\
                        <li><a ng-click="addMiseEnContext()">Mise en context</a></li>\
                        <li><a ng-click="addQuestion()">Question</a></li>\
                    </ul>\
                    <div ng-repeat="exRedContent in exRedContents">\
                        <div ng-switch on={{exRedContentType}}>\
                            <div ng-switch-when="1">\
                                <h5>Mise en context</h5>\
                                    Titre<input type="text" /><br />\
                                        <button ng-click="addTexte(1)">addText</button>\
                                    <div ng-repeat="MecField in MecFields">\
                                        <div ng-switch on={{fieldsType}}>\
                                                <div ng-switch-when="1">\
                                            Text<input type="text">\
                                        </div>\
                                            <div ng-switch-when="2">\
                                                  <h5>Text illustré</h5></ br>\
                                                  Position: <input type="radio" name="group1" value="droit" checked>Text à droite<br />\
                                            </div>\
                                     </div>\
                            </div>\
                          </div>\
                        <div ng-switch-when="2">\
                                <h5>Question</h5>\
                            </div>\
                    </div>\
                  </div>'

Demo: http://plnkr.co/edit/Cr0WN4hCuKTYJOfb5CBf?p=preview


Solution

  • You problem is that you are using $scope.MecFields as share able $scope variable in you directive. I'd love to make it separate via adding index to that object so that it will become unique/separate array for each ng-repeat element. The array content would depend on there index.

    Markup

    <button ng-click="addTexte($index)">addText</button>\
    <div ng-repeat="MecField in MecFields[$index]">\
        <div ng-switch on={{fieldsType}}>\
            <div ng-switch-when="1">\ Text
                <input type="text">\
            </div>\
            <div ng-switch-when="2">\
                <h5>Text illustré</h5></ br>\ Position:
                <input type="radio" name="group1" value="droit" checked>Text à droite
                <br />\
            </div>\
        </div>\
    </div>\
    

    Code

    $scope.addTexte = function(index) {
      $scope.fieldsType = $scope.types[0].id;
      if (!$scope.MecFields[index]) $scope.MecFields[index] = [];
      $scope.MecFields[index].push({
        field: '',
        value: ''
      });
    };
    

    Demo Plunkr