实际项目中的一个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>

)