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的结合使用,简单实现的这个东西,
版权声明:本文为博主原创文章,未经博主允许不得转载。

铁路12306微信小程序发布:支持余票查询、添加行程,让出行变得更加方便,你觉得了

12月26日消息,今天,中国铁路12306推出了微信小程序App,用户需要使用微信号登录,12306小程序的界面十分整洁,可以进行余票查询、时刻表查询、正晚点查询等。另外12306小程序还已经上线了车...
  • h8b6Pk7M7r8
  • h8b6Pk7M7r8
  • 2017年12月26日 00:00
  • 386

简单说说angularJS和一个经典例子

angularJS通过新的属性和表达式扩展了HTML。 注意这里是扩展了,让原来的HTML更加丰富的意思。 其次,angularJS是一个JS,有着JS的功能。 所有的语言其中一...
  • u013273344
  • u013273344
  • 2017年09月15日 10:44
  • 160

angularJS实战之小案例--notebook笔记本

来自《ionic实战》一书中的小案例,修改了一下,并写了详细注释。后台数据处理用的是node,为了展示效果数据存在json文件中,可暂时不看这部分。这个小案例虽然简单,但算是一个完整的案例了,前后端的...
  • sinat_21274091
  • sinat_21274091
  • 2016年10月05日 19:20
  • 3053

AngularJs入门实例

《一》、四大核心思想  1、依赖注入   2、模块化   3、双向绑定   4、语义化标签《二》、使用ng指令  1、ng-app 指令定义了AngularJs应用程序   2、ng-cont...
  • mqy1023
  • mqy1023
  • 2016年05月30日 19:41
  • 1542

AngularJS主要组成部分及小实例

AngularJS的主要组成部分:     启动(startup) - 展示"hello world!"     执行期(runtime) - AngularJS 执行期概览     作用域(s...
  • alex8046
  • alex8046
  • 2016年09月21日 14:30
  • 527

Excel VBA高效办公应用-第九章-VBA文秘办公技巧-Part1 (每日行程安排提醒)

首先,这是个很有趣的例子,可以考虑在日常工作中提醒个人事项。 代码如下: Option Explicit Private Sub CommandButton1_Click()...
  • hpdlzu80100
  • hpdlzu80100
  • 2017年06月18日 23:18
  • 254

angularjs简单使用...

.tr{ background: gray; } .trtr:nth-child(2n){ background: lightsteelblue; } .trtr:nth-child(2n-1){ b...
  • Zxw_BK
  • Zxw_BK
  • 2017年12月21日 10:50
  • 21

AngularJS系列:1、一个简单的AngularJS实例

AngularJS学习,开篇第一章。从此开始学习这个前端开发框架
  • lxhjh
  • lxhjh
  • 2016年01月26日 11:06
  • 2339

开始的我新的行程

  总是想写一些什么,但是又怕被谁看见……  现在,真的想写写了,  这么久了,是该写点什么东西来纪念我快失去的青春了...
  • AMY198512
  • AMY198512
  • 2008年04月23日 18:23
  • 305

AngularJS行程

行程 h2>吴四的日程span ng-bind="count()">span>h2> div> input type="text" ng-model="action">button ng...
  • junkaili
  • junkaili
  • 2017年09月20日 15:01
  • 85
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS对于行程管理的小例子简单使用
举报原因:
原因补充:

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