张张张的博客

全部原创 毕生心血 请勿模仿

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

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


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

<!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的结合使用,简单实现的这个东西,
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28292937/article/details/52356258
个人分类: web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭