Dynamic form fields AngularJS

입력 값이 실시간으로 출력 폼에 출력됨

by ipark

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<h3 >Dynamic form fields AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
     <h4>Inputs</h4>
    <ul ng-repeat="input in inputs">
        <li><span>{{input.name}} : </span>
            <div ng-switch="input.type">
                <div  ng-switch-when="text" > 
                    <input  type="text" 
                            ng-model="outputs[input.name]">
                    </input>
                </div>
                <div ng-switch-when="checkbox">
                    <input  type="checkbox" 
                            ng-model="outputs[input.name]"                                 
                            ng-checked="outputs[input.name]"                                 
                            value="outputs[input.name]" >                               
                    </input>
                </div>
            </div>
        </li>
    </ul>    
     <h4>Outputs</h4>
    <ul ng-repeat="input in inputs">
        <li>
            {{input.name}} : {{outputs[input.name]}}
        </li>
    </ul>
</div>

JavaScript

function Controller($scope) {
    $scope.outputs = {};
    $scope.inputs = [{
        type: "text",
        name: "first_field",
    }, {
        type: "text",
        name: "second_field",
    }, {
        type: "checkbox",
        name: "third_field",
    }];

}