关闭

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

标签: web前端angularjsjquery
352人阅读 评论(0) 收藏 举报
分类:

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


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

<!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的结合使用,简单实现的这个东西,

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:60470次
    • 积分:842
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:0篇
    • 译文:2篇
    • 评论:8条
    文章分类
    最新评论