码迷,mamicode.com
首页 > Web开发 > 详细

实际项目中的一个angularjs 应用

时间:2015-12-21 17:44:00      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

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

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>

)

 

实际项目中的一个angularjs 应用

标签:

原文地址:http://www.cnblogs.com/Expando/p/5063628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!