JSFiddle - React, Tailwind, and code Playground

by kyleshen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl">
    <!-- <div ng-repeat='m in model.questions'>
        <div item='m' mytest></div>
         <hr />
    </div> -->
     <div ng-repeat='mm in model2'>
          <div ng-repeat='m in mm'>
              <div item='m' mytest></div>
                       <hr />
         </div>
    </div>
    {{ model2 }}
</div>

JavaScript

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



app.controller('DemoCtrl', function DemoCtrl($scope){
    $scope.name = 'Anna';
    var json = '{"questions":[{"textTemplate":"{0}{1}{2}","controls":[{"type":"text","resultValue":"testdata"},{"type":"text","resultValue":""},{"type":"text","resultValue":""}]},{"textTemplate":"{0}{1}{2}","controls":[{"type":"text","resultValue":""},{"type":"text","resultValue":""},{"type":"text","resultValue":""}]}]}';
    $scope.model = angular.fromJson(json);
    
    //一個迴圈跑兩次
    $scope.model2 = [];
    while ($scope.model.questions.length) {
        $scope.model2.push($scope.model.questions.splice(0, 2))
    };

  });

 app.directive('mytest', function($compile){
    return{ 
      replace: true,
      restrict: 'A',
      scope: {
         item: '='
      },
      link: function(scope, element, attributes){
            console.log(scope);            
            var MyStr = scope.item.textTemplate;
            angular.forEach(scope.item.controls, function (obj, i) {
                MyStr = MyStr.replace("{" + i.toString() + "}", "<input type='text' ng-model='item.controls[" + i.toString() + "].resultValue' /><br />");
            });
            var content = $compile("<div>"+MyStr+"</div>")(scope);
            element.append(content);
      }
    };
  });