AngularJS对于行程管理的小例子简单使用

原创 2016年08月29日 20:31:03

下面我事我做一个叫行程管理的时候用到的一点东西希望对读者有帮助


上面及时实现的一个小效果,项目太大,只是简单说说,如果基础不好的呢,就希望去菜鸟网上看看基础再来:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>行程列表</title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <style>
        .style1 {
            color: blue
        }

        .style2 {
            color: red
        }

        .style3 {
            color: pink
        }
    </style>
</head>
<body>
<div class="container" ng-controller="listCtrl">
    <h1>{{roles.user}}的行程表</h1>
    <input type="text" value="" name="in" class="input-sm" ng-model="newitem"/>
    <button class="btn btn-default" ng-click="add(newitem)">添加行程</button>
    <table class="table table-striped">
        <thead >
        <th>地点</th>
        <th>完成</th>
        </thead>
        <tbody>
        <tr ng-repeat="n in roles.item ">
            <td>{{n.address}}</td>
            <td ng-class="n.time ? 'style1': 'style2'">
                <span ng-hide="!n.time">已完成</span>
                <span ng-hide="n.time">未完成</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="../js/angular.min.js"></script>
<script>
    var data = {
        user: "小明",
        item: [
            {address: "北京", time: true},
            {address: "上海", time: false},
            {address: "广州", time: true},
            {address: "郑州", time: false}
        ]
    }
    var app = angular.module("myApp", []);
    app.controller("listCtrl", function ($scope) {
        $scope.roles = data;
        $scope.mycss = {
            style1: "style1",
            style2: "style2",
            style3: "style3"
        }
        $scope.newitem="";
        $scope.add= function (newItem) {
            var str=$scope.newitem;
            if (str!=""){
            $scope.roles.item.push({address:newItem,time:false});
            $scope.newitem="";
            }else {
                alert("内容不能为空");
            }
        }
    })
</script>
</body>
</html>

上面用到的是bootstrap和anjs的结合使用,简单实现的这个东西,

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js/web 日程管理 插件

fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,目前最新版本是2.3.2。 只要调...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Web日程管理FullCalendar

fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,目前最新版本是2.3.2。 只要调用...

Web日程管理FullCalendar

FullCalendar是一款jQuery日程管理控件,官网下载地址http://fullcalendar.io/download,目前最新版本是3.3.1...
  • zsg88
  • zsg88
  • 2017年04月09日 18:22
  • 312

angular-ui-calendar使用简介

angular-ui-calendar  is a complete AngularJS directive for the Arshaw FullCalendar. angular-ui-calen...

神奇的angularJS——简单的angular例子

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。 很多前端应用的开发框架,比如Backbone、...

对暑期行程的一个简单总结

真的是应了那么一句话:“行百里者半九十”,原先还曾豪情壮志的想把blog搞得有声有色,得一个“恒”字勋章。现在看来,暑期将尽,更新无多,愧对了自己的那份心情。 好在亡羊补牢,把最近的一些行程做一个简...
  • liu6tot
  • liu6tot
  • 2014年08月20日 21:52
  • 825

团队行程管理软件-协作历Beta版

  • 2010年06月24日 19:32
  • 358KB
  • 下载

桌面日历秀行程日程管理软件

  • 2010年06月13日 17:35
  • 4.3MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS对于行程管理的小例子简单使用
举报原因:
原因补充:

(最多只允许输入30个字)