实际项目中的一个angularjs 应用

实际需求：通过下拉框，选择自己需要的类型，创建元素（要求必须是输入点击保存了才能出现对应的类型块）

html代码：

  <div class="list-panel-data">
            <div ng-repeat="item in metadata" class="add-metadata table-list">
                <table>
                    <tr>
                        <td align="right"><span>{{item.title}}</span></td>

                        <td class="metadata-type" ng-if="item.type!=null" align="right">
                            <div ng-switch="item.type">
                                <div ng-switch-when="1">
                                    <input type="text" class="form-control" />

                                </div>
                                <div ng-switch-when="2">
                                    <textarea class="form-control"></textarea>
                                </div>
                                <div ng-switch-when="3">
                                    <input type="radio" />
                                </div>

                                <div ng-switch-when="4">
                                    <input type="date" class="form-control" />
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <div ng-if="newMetadataItem != null" class="add-tilte">

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="title" ng-model="newMetadataItem.title">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" ng-click="addMetadata()">√</button>
                                </span>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" ng-click="deleteMetadata()">X</button>
                                </span>
                </div>

            </div>

            <div class="btn-group">
                            <span type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fa fa-plus-circle"></span>
                                自定义元数据 <span class="caret"></span>
                            </span>
                <ul class="dropdown-menu">
                    <li ng-click="blankMetadata(d)" ng-repeat="d in metadataTypes"><a>{{d.name}}</a></li>
                </ul>
            </div>

        </div>

js代码：

 $scope.metadata = [];
    $scope.metadataTypes = [
        { id: 1, name: "文本" },
        { id: 2, name: "文本域" },
        { id: 3, name: "布尔" },
        { id: 4, name: "时间" }

    ];

    $scope.newMetadataItem = null;

    $scope.blankMetadata = function (data) {
        $scope.newMetadataItem = null;
        $scope.newMetadataItem = {
            type: data.id,
            title: "",
            name: ""

        };
    };

    $scope.addMetadata = function () {
        $scope.metadata.push($scope.newMetadataItem);
        $scope.newMetadataItem = null;
    }
    $scope.deleteMetadata = function () {
        $scope.newMetadataItem = null;
    }

注意：(

请在头部引入：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="angular-1.4.1.js"></script>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="bootstrap.min.js"></script>

)