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

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 应用的更多相关文章

  1. 【Filter 不登陆无法访问】web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面的功能

    在web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面,而重定向到登陆界面的功能. 项目是用springMVC+spring+hibernate实现 (和这个没有多大关系) 第一步: 首先 ...

  2. Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

  3. 项目中的一个分页功能pagination

    项目中的一个分页功能pagination <script> //总页数 ; ; //分页总数量 $(function () { // $("#pagination"). ...

  4. 如何在 GitHub 的项目中创建一个分支呢?

    如何在 GitHub 的项目中创建一个分支呢? 其实很简单啦,直接点击 Branch,然后在弹出的文本框中添加自己的 Branch Name 然后点击蓝色的Create branch就可以了,这样一来 ...

  5. oracle性能优化(项目中的一个sql优化的简单记录)

    在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个 ...

  6. Java项目中每一个类都可以有一个main方法

    Java项目中每一个类都可以有一个main方法,但只有一个main方法会被执行,其他main方法可以对类进行单元测试. public class StaticTest { public static ...

  7. 在web项目中搭建一个spring mvc + spring + mybatis的环境

    介绍:本文中示范搭建一个ssm环境的框架:使用流程就是客户端通过http请求访问指定的接口,然后由服务器接受到请求处理完成后将结果返回. 本项目请求流程细节介绍:由客户端请求到指定的接口,这个接口是个 ...

  8. 记项目中ES6+gulp+angularjs里的问题

    AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...

  9. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

随机推荐

  1. EF INNER JOIN,LEFT JOIN,GROUP JOIN

    IQueryable<TOuter>的扩展方法中提供了 INNER JOIN,GROUP JOIN但是没有提供LEFT JOIN GROUP JOIN适用于一对多的场景,如果关联的GROU ...

  2. iniutils for Golang

    一直有计划将 Delphi 中的譬如 TIniFile 等相关功能移植到 Golang,这些设施在 Delphi 中(相对而言)比较常用,使用起来也非常方便. 虽然 Github 上早已有这些三方库, ...

  3. CSS3 -webkit-transform

    scale:缩放,1为原始大小.scale(x).正数放大,负数缩小.属性值为一个时,x/y轴同时缩放:属性值为两个值时,分别控制x.y轴的缩放 rotate:水平旋转,属性值格式为Xdeg.(deg ...

  4. IOS苹果和百度地图的相关使用

    iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).其中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...

  5. div盒子中子元素(子元素可能是盒子, 图片) 中居中的三种方法

  6. test homework ~ coverage about method printPrimes

    /******************************************************* * Finds and prints n prime integers * Jeff ...

  7. 【转】CSS:table-cell详解

    table-cell这个家伙在国外的网站中偶有露头,天朝由于IE6.7这两个货泛滥成灾,难有发挥,那么,这个家伙到底能干些什么呢?先让我们来研究下table,那些年曾经使用的table布局为何如此辉煌 ...

  8. 《与小卡特一起学Python》 Code6 注释

    """这是一个包括多行的注释, 使用了三重引号字符串. 这不完全是注释,不过也可以相当于注释. """ #***************** ...

  9. JS事件模型小结

    三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...

  10. eclipse加载maven工程提示pom.xml无法解析org.apache.maven.plugins:maven-resources-plugin:2.4.3解决方案

    pom文件提示信息: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.4.3 from http:/ ...