标签:
实际需求:通过下拉框,选择自己需要的类型,创建元素(要求必须是输入点击保存了才能出现对应的类型块)
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>
)
标签:
原文地址:http://www.cnblogs.com/Expando/p/5063628.html