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

最新推荐文章于 2018-09-12 17:16:23 发布

张张张的博客

最新推荐文章于 2018-09-12 17:16:23 发布

阅读量780

点赞数

分类专栏： web前端文章标签： web前端 angularjs jquery

本文链接：https://blog.csdn.net/qq_28292937/article/details/52356258

版权

web前端专栏收录该内容

34 篇文章 2 订阅

订阅专栏

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

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

<!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

收藏

觉得还不错? 一键收藏
0
评论
AngularJS对于行程管理的小例子简单使用

下面我事我做一个叫行程管理的时候用到的一点东西希望对读者有帮助上面及时实现的一个小效果，项目太大，只是简单说说，如果基础不好的呢，就希望去菜鸟网上看看基础再来：行程列表 .style1 { color: blue } .style2 { co
复制链接

扫一扫